initial port of the UI kit
This commit is contained in:
392
go/webui/fuzzymatch.go
Normal file
392
go/webui/fuzzymatch.go
Normal file
@@ -0,0 +1,392 @@
|
||||
package webui
|
||||
|
||||
import (
|
||||
"sort"
|
||||
"strconv"
|
||||
"strings"
|
||||
"unicode"
|
||||
|
||||
"kjol/vdom"
|
||||
)
|
||||
|
||||
// Port of web/kit/FuzzyMatch.tsx.
|
||||
//
|
||||
// The fuzzy-scoring/matching logic (Forrest Smith's fts_fuzzy_match, Sublime-
|
||||
// style subsequence scoring) is pure and is ported directly to Go below. The
|
||||
// component keeps the API + structure + Tailwind and models query / open /
|
||||
// highlighted state as plain value props + callbacks.
|
||||
//
|
||||
// NOTE: the exported matcher `fuzzyMatch` would collide (case-folded) with the
|
||||
// `FuzzyMatch` component in Go, so it is renamed to FuzzyMatchOne here. The
|
||||
// other matchers keep their names (Go-cased): FuzzyMatchTypoTolerant,
|
||||
// FuzzySegments, RankFuzzyMatches.
|
||||
// NOTE: positions are rune indices (the TSX used UTF-16 code-unit indices);
|
||||
// these agree for BMP text and are what FuzzySegments consumes here.
|
||||
|
||||
// ============================================================================
|
||||
// Fuzzy matching (Sublime-style subsequence scoring)
|
||||
// ============================================================================
|
||||
|
||||
// FuzzyMatchResult is a scored match with the matched character positions.
|
||||
type FuzzyMatchResult struct {
|
||||
Score int
|
||||
Positions []int
|
||||
}
|
||||
|
||||
// FuzzySegment is a run of text flagged matched or unmatched (for highlighting).
|
||||
type FuzzySegment struct {
|
||||
Text string
|
||||
Match bool
|
||||
}
|
||||
|
||||
// FuzzyRankedItem is one ranked option: its value, score, and highlight segments.
|
||||
type FuzzyRankedItem struct {
|
||||
Value string
|
||||
Score int
|
||||
Segments []FuzzySegment
|
||||
}
|
||||
|
||||
const (
|
||||
fuzzySequentialBonus = 15
|
||||
fuzzySeparatorBonus = 30
|
||||
fuzzyCamelBonus = 30
|
||||
fuzzyFirstLetterBonus = 15
|
||||
fuzzyLeadingPenalty = -5
|
||||
fuzzyMaxLeadingPenalty = -15
|
||||
fuzzyUnmatchedPenalty = -1
|
||||
fuzzyRecursionLimit = 10
|
||||
fuzzyTransposePenalty = -20
|
||||
fuzzyExactSubstrBonus = 100
|
||||
)
|
||||
|
||||
func fuzzyIsLower(c rune) bool { return c >= 'a' && c <= 'z' }
|
||||
func fuzzyIsUpper(c rune) bool { return c >= 'A' && c <= 'Z' }
|
||||
func fuzzyIsSeparator(c rune) bool { return c == ' ' || c == '_' || c == '-' }
|
||||
|
||||
func fuzzyMax(a, b int) int {
|
||||
if a > b {
|
||||
return a
|
||||
}
|
||||
return b
|
||||
}
|
||||
|
||||
func fuzzyScore(target []rune, matches []int) int {
|
||||
score := 100
|
||||
score += fuzzyMax(fuzzyMaxLeadingPenalty, fuzzyLeadingPenalty*matches[0])
|
||||
score += fuzzyUnmatchedPenalty * (len(target) - len(matches))
|
||||
|
||||
for i := 0; i < len(matches); i++ {
|
||||
curr := matches[i]
|
||||
if i > 0 && curr == matches[i-1]+1 {
|
||||
score += fuzzySequentialBonus
|
||||
}
|
||||
if curr == 0 {
|
||||
score += fuzzyFirstLetterBonus
|
||||
} else {
|
||||
prev := target[curr-1]
|
||||
if fuzzyIsLower(prev) && fuzzyIsUpper(target[curr]) {
|
||||
score += fuzzyCamelBonus
|
||||
}
|
||||
if fuzzyIsSeparator(prev) {
|
||||
score += fuzzySeparatorBonus
|
||||
}
|
||||
}
|
||||
}
|
||||
return score
|
||||
}
|
||||
|
||||
func fuzzyRecurse(query, target []rune, qi, ti int, matches []int, rec *int) []int {
|
||||
*rec++
|
||||
if *rec >= fuzzyRecursionLimit {
|
||||
return nil
|
||||
}
|
||||
|
||||
var best []int
|
||||
for qi < len(query) && ti < len(target) {
|
||||
if unicode.ToLower(query[qi]) == unicode.ToLower(target[ti]) {
|
||||
skipped := fuzzyRecurse(query, target, qi, ti+1, append([]int(nil), matches...), rec)
|
||||
if skipped != nil && (best == nil || fuzzyScore(target, skipped) > fuzzyScore(target, best)) {
|
||||
best = skipped
|
||||
}
|
||||
matches = append(matches, ti)
|
||||
qi++
|
||||
}
|
||||
ti++
|
||||
}
|
||||
|
||||
if qi < len(query) {
|
||||
return best // query not fully consumed -> this path failed
|
||||
}
|
||||
if best == nil || fuzzyScore(target, matches) > fuzzyScore(target, best) {
|
||||
return matches
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
// FuzzyMatchOne scores query against target, or returns nil if the query is
|
||||
// empty or is not a subsequence of target. (Port of the TSX `fuzzyMatch`.)
|
||||
func FuzzyMatchOne(query, target string) *FuzzyMatchResult {
|
||||
if query == "" {
|
||||
return nil
|
||||
}
|
||||
qr := []rune(query)
|
||||
tr := []rune(target)
|
||||
rec := 0
|
||||
matches := fuzzyRecurse(qr, tr, 0, 0, nil, &rec)
|
||||
if matches == nil {
|
||||
return nil
|
||||
}
|
||||
score := fuzzyScore(tr, matches)
|
||||
// A contiguous substring hit ("bankof" in "Bankof") should outrank a
|
||||
// word-boundary match split across tokens ("Bank of America"). The bonus is
|
||||
// constant per query/target, so it lives here rather than in the per-
|
||||
// alignment scorer the recursion uses to pick match positions.
|
||||
if strings.Contains(strings.ToLower(target), strings.ToLower(query)) {
|
||||
score += fuzzyExactSubstrBonus
|
||||
}
|
||||
return &FuzzyMatchResult{Score: score, Positions: matches}
|
||||
}
|
||||
|
||||
// FuzzyMatchTypoTolerant also tries every single adjacent-swap variant of the
|
||||
// query (subsequence matching can't tolerate a transposed typo like "teh" vs
|
||||
// "the"), penalizing transposed hits so exact matches still rank first.
|
||||
func FuzzyMatchTypoTolerant(query, target string) *FuzzyMatchResult {
|
||||
best := FuzzyMatchOne(query, target)
|
||||
qr := []rune(query)
|
||||
for i := 0; i < len(qr)-1; i++ {
|
||||
swapped := string(qr[:i]) + string(qr[i+1]) + string(qr[i]) + string(qr[i+2:])
|
||||
m := FuzzyMatchOne(swapped, target)
|
||||
if m == nil {
|
||||
continue
|
||||
}
|
||||
score := m.Score + fuzzyTransposePenalty
|
||||
if best == nil || score > best.Score {
|
||||
best = &FuzzyMatchResult{Score: score, Positions: m.Positions}
|
||||
}
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
// FuzzySegments splits text into alternating matched / unmatched runs for
|
||||
// highlighting, using the given (rune-index) positions.
|
||||
func FuzzySegments(text string, positions []int) []FuzzySegment {
|
||||
matched := make(map[int]bool, len(positions))
|
||||
for _, p := range positions {
|
||||
matched[p] = true
|
||||
}
|
||||
tr := []rune(text)
|
||||
var segments []FuzzySegment
|
||||
buf := ""
|
||||
bufMatch := matched[0]
|
||||
for i := 0; i < len(tr); i++ {
|
||||
isMatch := matched[i]
|
||||
if isMatch != bufMatch {
|
||||
if buf != "" {
|
||||
segments = append(segments, FuzzySegment{Text: buf, Match: bufMatch})
|
||||
}
|
||||
buf = ""
|
||||
bufMatch = isMatch
|
||||
}
|
||||
buf += string(tr[i])
|
||||
}
|
||||
if buf != "" {
|
||||
segments = append(segments, FuzzySegment{Text: buf, Match: bufMatch})
|
||||
}
|
||||
return segments
|
||||
}
|
||||
|
||||
// RankFuzzyMatches ranks options against query, best score first, with
|
||||
// highlight segments. Returns nil for an empty query. maxResults <= 0 means no
|
||||
// limit. This is the headless entry point.
|
||||
func RankFuzzyMatches(query string, options []string, maxResults int) []FuzzyRankedItem {
|
||||
q := strings.TrimSpace(query)
|
||||
if q == "" {
|
||||
return nil
|
||||
}
|
||||
var out []FuzzyRankedItem
|
||||
for _, value := range options {
|
||||
m := FuzzyMatchTypoTolerant(q, value)
|
||||
if m != nil {
|
||||
out = append(out, FuzzyRankedItem{Value: value, Score: m.Score, Segments: FuzzySegments(value, m.Positions)})
|
||||
}
|
||||
}
|
||||
sort.SliceStable(out, func(i, j int) bool { return out[i].Score > out[j].Score })
|
||||
if maxResults > 0 && len(out) > maxResults {
|
||||
out = out[:maxResults]
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
// FuzzyMatchDisplay selects how FuzzyMatch renders its results.
|
||||
type FuzzyMatchDisplay = string
|
||||
|
||||
const (
|
||||
FuzzyDisplayList = "list" // inline highlighted results below the input (default)
|
||||
FuzzyDisplayDropdown = "dropdown" // ComboBox-style autocomplete popover
|
||||
FuzzyDisplayNone = "none" // render only the input (headless)
|
||||
)
|
||||
|
||||
const fuzzyInputCls = "bg-white block w-full border border-neutral-300 rounded-default shadow-xs text-sm p-2 h-[38px] focus:outline-2 focus:outline-offset-1 focus:outline-sky-500"
|
||||
|
||||
// Mirror FormCombobox's dropdown styling: neutral hover / highlight.
|
||||
const fuzzyDropdownCls = "bg-white border border-neutral-300 rounded-default shadow-lg max-h-60 overflow-auto"
|
||||
const fuzzyDropdownOptionCls = "w-full text-left p-2 text-sm cursor-pointer flex items-center justify-between gap-2 bg-transparent border-none hover:bg-neutral-100 whitespace-nowrap"
|
||||
const fuzzyDropdownOptionHighlightCls = "bg-neutral-100"
|
||||
|
||||
// FuzzyMatchProps configures the FuzzyMatch component. Query / Open / Highlighted
|
||||
// are caller-held state (read at the call site); the On* callbacks report changes.
|
||||
type FuzzyMatchProps struct {
|
||||
Options []string
|
||||
Display FuzzyMatchDisplay // default FuzzyDisplayList
|
||||
ShowScores bool
|
||||
MaxResults int
|
||||
Placeholder string
|
||||
Class string
|
||||
ListClass string
|
||||
|
||||
Query string // current query text
|
||||
Open bool // dropdown open (Display == dropdown)
|
||||
Highlighted int // highlighted result index (dropdown keyboard selection)
|
||||
|
||||
OnSelect func(value string, item FuzzyRankedItem)
|
||||
OnQueryChange func(query string)
|
||||
OnResults func(results []FuzzyRankedItem) // see NOTE: not auto-invoked
|
||||
}
|
||||
|
||||
// fuzzyHighlight renders a segment list as sky-highlighted / plain spans.
|
||||
func fuzzyHighlight(segments []FuzzySegment) []*vdom.VNode {
|
||||
out := make([]*vdom.VNode, 0, len(segments))
|
||||
for _, seg := range segments {
|
||||
if seg.Match {
|
||||
out = append(out, vdom.El("span", vdom.Attr("class", "text-sky-700 font-semibold"), vdom.Text(seg.Text)))
|
||||
} else {
|
||||
out = append(out, vdom.El("span", vdom.Text(seg.Text)))
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// fuzzyScoreBadge renders the debug score badge, or nil when disabled.
|
||||
func fuzzyScoreBadge(show bool, score int) *vdom.VNode {
|
||||
if !show {
|
||||
return nil
|
||||
}
|
||||
return vdom.El("span", vdom.Attr("class", "ml-3 shrink-0 text-xs text-neutral-400"), vdom.Text(strconv.Itoa(score)))
|
||||
}
|
||||
|
||||
// fuzzyListView renders the inline "list" display. Before the user types, all
|
||||
// options show unranked so the searchable set is visible up front.
|
||||
func fuzzyListView(p FuzzyMatchProps, results []FuzzyRankedItem) *vdom.VNode {
|
||||
var items []FuzzyRankedItem
|
||||
if strings.TrimSpace(p.Query) != "" {
|
||||
items = results
|
||||
} else {
|
||||
for _, v := range p.Options {
|
||||
items = append(items, FuzzyRankedItem{Value: v, Score: 0, Segments: []FuzzySegment{{Text: v, Match: false}}})
|
||||
}
|
||||
}
|
||||
|
||||
outer := []vdom.Mod{vdom.Attr("class", cx("mt-3", pick(p.ListClass, "h-72 overflow-y-auto")))}
|
||||
if len(items) > 0 {
|
||||
ul := []vdom.Mod{vdom.Attr("class", "flex flex-col gap-0.5")}
|
||||
for _, r := range items {
|
||||
r := r
|
||||
li := []vdom.Mod{
|
||||
vdom.Attr("class", "flex items-center justify-between gap-3 px-2 py-1 rounded-default cursor-pointer hover:bg-neutral-100"),
|
||||
}
|
||||
if p.OnSelect != nil {
|
||||
li = append(li, vdom.On(vdom.EVENT_CLICK, func() { p.OnSelect(r.Value, r) }))
|
||||
}
|
||||
li = append(li, vdom.El("span", kids([]vdom.Mod{vdom.Attr("class", "text-sm text-neutral-800")}, fuzzyHighlight(r.Segments))...))
|
||||
if badge := fuzzyScoreBadge(p.ShowScores, r.Score); badge != nil {
|
||||
li = append(li, badge)
|
||||
}
|
||||
ul = append(ul, vdom.El("li", li...))
|
||||
}
|
||||
outer = append(outer, vdom.El("ul", ul...))
|
||||
} else if strings.TrimSpace(p.Query) != "" {
|
||||
outer = append(outer, vdom.El("p",
|
||||
vdom.Attr("class", "text-sm text-neutral-500 italic"),
|
||||
vdom.Text(`No matches for "`+p.Query+`".`)))
|
||||
}
|
||||
return vdom.El("div", outer...)
|
||||
}
|
||||
|
||||
// fuzzyDropdownView renders the "dropdown" display's option panel.
|
||||
//
|
||||
// NOTE: the TSX portaled this to document.body with `position: fixed` coords
|
||||
// from getBoundingClientRect + a resize/scroll effect; here it's a statically
|
||||
// `absolute` panel anchored under the input (the container is `relative`).
|
||||
func fuzzyDropdownView(p FuzzyMatchProps, results []FuzzyRankedItem) *vdom.VNode {
|
||||
mods := []vdom.Mod{
|
||||
vdom.Attr("data-floating-content", "true"),
|
||||
vdom.Attr("class", cx("absolute left-0 right-0 top-full mt-1 z-[200]", fuzzyDropdownCls)),
|
||||
}
|
||||
for i, r := range results {
|
||||
r := r
|
||||
cls := fuzzyDropdownOptionCls
|
||||
if i == p.Highlighted {
|
||||
cls = cx(fuzzyDropdownOptionCls, fuzzyDropdownOptionHighlightCls)
|
||||
}
|
||||
btnMods := []vdom.Mod{
|
||||
vdom.Attr("type", "button"),
|
||||
vdom.Attr("class", cls),
|
||||
}
|
||||
if p.OnSelect != nil {
|
||||
btnMods = append(btnMods, vdom.On(vdom.EVENT_CLICK, func() { p.OnSelect(r.Value, r) }))
|
||||
}
|
||||
btnMods = append(btnMods, vdom.El("span", kids([]vdom.Mod{vdom.Attr("class", "text-neutral-800")}, fuzzyHighlight(r.Segments))...))
|
||||
if badge := fuzzyScoreBadge(p.ShowScores, r.Score); badge != nil {
|
||||
btnMods = append(btnMods, badge)
|
||||
}
|
||||
mods = append(mods, vdom.El("button", btnMods...))
|
||||
}
|
||||
return vdom.El("div", mods...)
|
||||
}
|
||||
|
||||
// FuzzyMatch renders a fuzzy-search input with inline ("list"), autocomplete
|
||||
// ("dropdown"), or headless ("none") result display.
|
||||
//
|
||||
// NOTE: keyboard navigation (ArrowUp/Down/Enter/Escape) is dropped — the vdom
|
||||
// Event exposes no key. In dropdown mode, updating Query and closing Open on
|
||||
// select, opening on focus/typing, and outside-click dismissal are the caller's
|
||||
// responsibility (report them via the On* callbacks). OnResults is retained for
|
||||
// API parity but is not auto-invoked; headless callers should call
|
||||
// RankFuzzyMatches directly.
|
||||
func FuzzyMatch(p FuzzyMatchProps) *vdom.VNode {
|
||||
display := p.Display
|
||||
if display == "" {
|
||||
display = FuzzyDisplayList
|
||||
}
|
||||
|
||||
results := RankFuzzyMatches(p.Query, p.Options, p.MaxResults)
|
||||
|
||||
inputMods := []vdom.Mod{
|
||||
vdom.Attr("type", "text"),
|
||||
vdom.Attr("class", fuzzyInputCls),
|
||||
vdom.Prop("value", p.Query),
|
||||
vdom.Attr("placeholder", pick(p.Placeholder, "Search...")),
|
||||
}
|
||||
if p.OnQueryChange != nil {
|
||||
inputMods = append(inputMods, vdom.OnEvent(vdom.EVENT_INPUT, func(e vdom.Event) { p.OnQueryChange(e.Value()) }))
|
||||
}
|
||||
|
||||
mods := []vdom.Mod{
|
||||
vdom.Attr("class", cx("relative", p.Class)),
|
||||
vdom.El("input", inputMods...),
|
||||
}
|
||||
|
||||
switch display {
|
||||
case FuzzyDisplayList:
|
||||
mods = append(mods, fuzzyListView(p, results))
|
||||
case FuzzyDisplayDropdown:
|
||||
if p.Open && len(results) > 0 {
|
||||
mods = append(mods, fuzzyDropdownView(p, results))
|
||||
}
|
||||
}
|
||||
return vdom.El("div", mods...)
|
||||
}
|
||||
Reference in New Issue
Block a user