Add recent queries and highlight matched signature fragments

Author: pikinier20

scaladoc-js/common/css/searchbar.css

@@ -71,6 +71,7 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   height: 16px;
   width: 16px;
   margin: 4px 8px 0px 0px;
+  color: var(--text-secondary)
 }
 
 .scaladoc-searchbar-row[result] {

scaladoc-js/common/src/utils/SafeLocalStorage.scala

@@ -0,0 +1,44 @@
+package dotty.tools.scaladoc
+
+import scala.scalajs.js
+import scala.scalajs.js._
+import org.scalajs.dom._
+import org.scalajs.dom.ext._
+import scala.util.chaining._
+
+class SafeLocalStorage[T <: js.Any](key: String, defaultValue: T) {
+
+  val isLocalStorageSupported: Boolean = try {
+    val testKey = "__TEST__KEY__"
+    window.localStorage.setItem(testKey, "")
+    window.localStorage.removeItem(testKey)
+    true
+  } catch {
+    case _ => false
+  }
+
+  def checkSupport[U](defaultValue: U)(callback: () => U): U =
+    if isLocalStorageSupported then callback() else defaultValue
+
+  def parseData(data: String): T =
+    try {
+      Option(JSON.parse(data).asInstanceOf[T]).getOrElse(defaultValue)
+    } catch {
+      case _ => defaultValue
+    }
+
+  def getData: T =
+    checkSupport(defaultValue) { () =>
+      window.localStorage
+        .getItem(key)
+        .pipe(parseData)
+    }
+
+  def setData(data: T): Unit =
+    checkSupport(()) { () =>
+      JSON.stringify(data)
+        .pipe(window.localStorage.setItem(key, _))
+    }
+
+  def isEmpty: Boolean = getData == defaultValue
+}

scaladoc-js/main/src/searchbar/SearchbarComponent.scala

@@ -2,6 +2,7 @@ package dotty.tools.scaladoc
 
 import utils.HTML._
 
+import scala.scalajs.js.Date
 import org.scalajs.dom._
 import org.scalajs.dom.ext._
 import org.scalajs.dom.html.Input
@@ -16,7 +17,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   val initialChunkSize = 5
   val resultsChunkSize = 20
   extension (p: PageEntry)
-    def toHTML =
+    def toHTML(boldChars: Set[Int]) =
       val location = if (p.isLocationExternal) {
         p.location
       } else {
@@ -25,7 +26,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
 
       div(cls := "scaladoc-searchbar-row monospace", "result" := "")(
         a(href := location)(
-          p.fullName,
+          p.fullName.zipWithIndex.map((c, i) => if boldChars.contains(i) then b(c.toString) else c.toString),
           span(cls := "pull-right scaladoc-searchbar-location")(p.description)
         ).tap { _.onclick = (event: Event) =>
           if (document.body.contains(rootDiv)) {
@@ -63,14 +64,29 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
         })
       }
 
-  def createKindSeparator(kind: String) =
+  extension (rq: RecentQuery)
+    def toHTML =
+      div(cls := "scaladoc-searchbar-row monospace", "result" := "")(
+        a(
+          span(rq.query)
+        )
+      ).tap { _.addEventListener("click", _ => {
+          inputElem.value = rq.query
+          inputElem.dispatchEvent(new Event("input"))
+        })
+      }.tap { wrapper => wrapper.addEventListener("mouseover", {
+          case e: MouseEvent => handleHover(wrapper)
+        })
+      }
+
+  def createKindSeparator(kind: String, customClass: String = "") =
     div(cls := "scaladoc-searchbar-row monospace", "divider" := "")(
-      span(cls := s"micon ${kind.take(2)}"),
+      span(cls := s"micon ${kind.take(2)} $customClass"),
       span(kind)
     )
 
   def handleNewFluffQuery(matchers: List[Matchers]) =
-    val result = engine.query(matchers)
+    val result: List[(PageEntry, Set[Int])] = engine.query(matchers)
     val fragment = document.createDocumentFragment()
     def createLoadMoreElement =
       div(cls := "scaladoc-searchbar-row monospace", "loadmore" := "")(
@@ -81,10 +97,10 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
         .addEventListener("mouseover", _ => handleHover(loadMoreElement))
       }
 
-    result.groupBy(_.kind).map {
+    result.groupBy(_._1.kind).map {
       case (kind, entries) =>
         val kindSeparator = createKindSeparator(kind)
-        val htmlEntries = entries.map(_.toHTML)
+        val htmlEntries = entries.map((p, set) => p.toHTML(set))
         val loadMoreElement = createLoadMoreElement
         def loadMoreResults(entries: List[raw.HTMLElement]): Unit = {
           loadMoreElement.onclick = (event: Event) => {
@@ -109,9 +125,26 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     }
 
     resultsDiv.scrollTop = 0
-    while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
     resultsDiv.appendChild(fragment)
 
+  def handleRecentQueries(query: String) = {
+    val recentQueries = RecentQueryStorage.getData
+    if query != "" then RecentQueryStorage.addEntry(RecentQuery(query, Date.now()))
+    val matching = recentQueries
+      .filterNot(rq => rq.query.equalsIgnoreCase(query)) // Don't show recent query that is equal to provided query
+      .filter { rq => // Fuzzy search
+        rq.query.foldLeft(query) { (pattern, nextChar) =>
+          if !pattern.isEmpty then {
+            if pattern.head.toString.equalsIgnoreCase(nextChar.toString) then pattern.tail else pattern
+          } else ""
+      }.isEmpty
+    }
+    if matching.nonEmpty then {
+      resultsDiv.appendChild(createKindSeparator("Recently searched", "fas fa-clock"))
+      matching.map(_.toHTML).foreach(resultsDiv.appendChild)
+    }
+  }
+
   def createLoadingAnimation: raw.HTMLElement =
     div(cls := "loading-wrapper")(
       div(cls := "loading")
@@ -124,35 +157,33 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
 
   var timeoutHandle: SetTimeoutHandle = null
   def handleNewQuery(query: String) =
-    clearTimeout(timeoutHandle)
     resultsDiv.scrollTop = 0
     resultsDiv.onscroll = (event: Event) => { }
-    def clearResults() = while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
     val fragment = document.createDocumentFragment()
-    parser.parse(query) match {
-      case EngineMatchersQuery(matchers) =>
-        clearResults()
-        handleNewFluffQuery(matchers)
-      case BySignature(signature) =>
-        timeoutHandle = setTimeout(1.second) {
-          val loading = createLoadingAnimation
-          val kindSeparator = createKindSeparator("inkuire")
-          clearResults()
-          resultsDiv.appendChild(loading)
-          resultsDiv.appendChild(kindSeparator)
-          inkuireEngine.query(query) { (m: InkuireMatch) =>
-            val next = resultsDiv.children
-              .find(child => child.hasAttribute("mq") && Integer.parseInt(child.getAttribute("mq")) > m.mq)
-            next.fold {
-              resultsDiv.appendChild(m.toHTML)
-            } { next =>
-              resultsDiv.insertBefore(m.toHTML, next)
+    timeoutHandle = setTimeout(600.millisecond) {
+      clearResults()
+      handleRecentQueries(query)
+      parser.parse(query) match {
+        case EngineMatchersQuery(matchers) =>
+            handleNewFluffQuery(matchers)
+        case BySignature(signature) =>
+            val loading = createLoadingAnimation
+            val kindSeparator = createKindSeparator("inkuire")
+            resultsDiv.appendChild(loading)
+            resultsDiv.appendChild(kindSeparator)
+            inkuireEngine.query(query) { (m: InkuireMatch) =>
+              val next = resultsDiv.children
+                .find(child => child.hasAttribute("mq") && Integer.parseInt(child.getAttribute("mq")) > m.mq)
+              next.fold {
+                resultsDiv.appendChild(m.toHTML)
+              } { next =>
+                resultsDiv.insertBefore(m.toHTML, next)
+              }
+            } { (s: String) =>
+              resultsDiv.removeChild(loading)
+              resultsDiv.appendChild(s.toHTMLError)
             }
-          } { (s: String) =>
-            resultsDiv.removeChild(loading)
-            resultsDiv.appendChild(s.toHTMLError)
-          }
-        }
+      }
     }
 
   private val searchIcon: html.Button =
@@ -173,9 +204,12 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   private val inputElem: html.Input =
     input(id := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Find anything").tap { element =>
       element.addEventListener("input", { e =>
+        clearTimeout(timeoutHandle)
         val inputValue = e.target.asInstanceOf[html.Input].value
-        if inputValue.isEmpty then showHints()
-        else handleNewQuery(inputValue)
+        if inputValue.isEmpty then {
+          clearResults()
+          if RecentQueryStorage.isEmpty then showHints() else handleRecentQueries("")
+        } else handleNewQuery(inputValue)
       })
 
       element.autocomplete = "off"
@@ -184,6 +218,8 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   private val resultsDiv: html.Div =
     div(id := "scaladoc-searchbar-results")
 
+  def clearResults() = while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
+
   private val rootHiddenClasses = "hidden"
   private val rootShowClasses   = ""
 
@@ -291,7 +327,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   private def handleEscape() = {
     // clear the search input and close the search
     inputElem.value = ""
-    showHints()
+    inputElem.dispatchEvent(new Event("input"))
     document.body.removeChild(rootDiv)
   }
 
@@ -321,7 +357,6 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   }
 
   private def showHints() = {
-    def clearResults() = while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
     val hintsDiv = div(cls := "searchbar-hints")(
       span(cls := "lightbulb"),
       h1(cls := "body-medium")("A bunch of search hints to make your life easier"),
@@ -339,8 +374,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
         li(cls := "link body-small")("Availability of searching by inkuire depends on the configuration of Scaladoc. For more info, ", a(href := "https://docs.scala-lang.org/scala3/guides/scaladoc/search-engine.html")("the documentation")),
       )
     )
-    clearResults()
     resultsDiv.appendChild(hintsDiv)
   }
 
-  showHints()
+  inputElem.dispatchEvent(new Event("input"))

scaladoc-js/main/src/searchbar/engine/Matchers.scala

@@ -4,25 +4,26 @@ sealed trait EngineQuery
 case class EngineMatchersQuery(matchers: List[Matchers]) extends EngineQuery
 case class BySignature(signature: String) extends EngineQuery
 
-sealed trait Matchers extends Function1[PageEntry, Int]
+case class Match(priority: Int, matchedIndexes: Set[Int]) // matchedIndexes - indexes of chars that got matched
+
+sealed trait Matchers extends Function1[PageEntry, Match]
 
 case class ByName(query: String) extends Matchers:
   val tokens = StringUtils.createCamelCaseTokens(query)
-  def apply(p: PageEntry): Int = {
+  def apply(p: PageEntry): Match = {
     val nameOption = Option(p.shortName.toLowerCase)
     //Edge case for empty query string
-    if query == "" then 1
+    if query == "" then Match(1, Set.empty)
     else {
-      val results = List(
-        nameOption.filter(_.contains(query.toLowerCase)).fold(-1)(_.size - query.size),
-        if p.tokens.size >= tokens.size && p.tokens.zip(tokens).forall( (token, query) => token.startsWith(query))
-          then p.tokens.size - tokens.size + 1
-          else -1
-        //acronym.filter(_.contains(query)).fold(-1)(_.size - query.size + 1)
-      )
-      if results.forall(_ == -1) then -1 else results.filter(_ != -1).min
+      val (result, indexes) = p.shortName.toLowerCase.zipWithIndex.foldLeft((query.toLowerCase, Set.empty[Int])) {
+        case ((pattern, indexes), (nextChar, index)) =>
+          if !pattern.isEmpty then {
+            if pattern.head.toString.equalsIgnoreCase(nextChar.toString) then (pattern.tail, indexes + index) else (pattern, indexes)
+          } else ("", indexes)
+      }
+      if result.isEmpty then Match(p.shortName.size - query.size + 1, indexes) else Match(-1, Set.empty)
     }
   }
 
 case class ByKind(kind: String) extends Matchers:
-  def apply(p: PageEntry): Int = p.fullName.split(" ").headOption.filter(_.equalsIgnoreCase(kind)).fold(-1)(_ => 1)
+  def apply(p: PageEntry): Match = Match(p.fullName.split(" ").headOption.filter(_.equalsIgnoreCase(kind)).fold(-1)(_ => 1), Set.empty)

scaladoc-js/main/src/searchbar/engine/SearchbarEngine.scala

@@ -4,17 +4,17 @@ import math.Ordering.Implicits.seqOrdering
 import org.scalajs.dom.Node
 
 class SearchbarEngine(pages: List[PageEntry]):
-  def query(query: List[Matchers]): List[PageEntry] =
+  def query(query: List[Matchers]): List[(PageEntry, Set[Int])] =
     pages
       .map( page =>
         page -> query.map(matcher => matcher(page))
       )
       .filterNot {
-        case (page, matchResults) => matchResults.exists(_ < 0)
+        case (page, matchResults) => matchResults.map(_.priority).exists(_ < 0)
       }
       .sortBy {
-        case (page, matchResults) => matchResults
+        case (page, matchResults) => matchResults.map(_.priority)
       }
       .map {
-        case (page, matchResults) => page
+        case (page, matchResults) => page -> matchResults.map(_.matchedIndexes).reduceLeft(_ ++ _)
       }

scaladoc-js/main/src/searchbar/recent/recentQueries.scala

@@ -0,0 +1,14 @@
+package dotty.tools.scaladoc
+
+import scala.scalajs.js
+
+class RecentQuery(val query: String, val timestamp: Double) extends js.Object
+
+object RecentQueryStorage extends SafeLocalStorage[js.Array[RecentQuery]]("__RECENT__QUERIES__", js.Array()) {
+  val maxEntries = 5
+
+  def addEntry(rq: RecentQuery): Unit = {
+    val newData = getData :+ rq
+    setData(newData.sortBy(_.timestamp).distinctBy(_.query).takeRight(maxEntries))
+  }
+}