feat(frontend): add debounced typeahead suggestions to search input

frontend/src/Main.elm

@@ -55,6 +55,7 @@ type alias Flags =
     , elasticsearchUsername : String
     , elasticsearchPassword : String
     , nixosChannels : Json.Decode.Value
+    , saveData : Bool
     }
 
 
@@ -65,6 +66,7 @@ type alias Model =
     , defaultNixOSChannel : String
     , nixosChannels : List NixOSChannel
     , page : Page
+    , typeaheadEnabled : Bool
     }
 
 
@@ -107,6 +109,7 @@ init flags url navKey =
             , nixosChannels = nixosChannels.channels
             , page = NotFound
             , route = Route.Home
+            , typeaheadEnabled = not flags.saveData
             }
     in
     changeRouteTo model url
@@ -225,17 +228,17 @@ pageMatch m1 m2 =
             True
 
         ( Packages model_a, Packages model_b ) ->
-            { model_a | show = Nothing, showInstallDetails = Search.Unset, result = NotAsked }
-                == { model_b | show = Nothing, showInstallDetails = Search.Unset, result = NotAsked }
+            { model_a | show = Nothing, showInstallDetails = Search.Unset, result = NotAsked, typeahead = model_b.typeahead }
+                == { model_b | show = Nothing, showInstallDetails = Search.Unset, result = NotAsked, typeahead = model_b.typeahead }
 
         ( Options model_a, Options model_b ) ->
-            { model_a | show = Nothing, result = NotAsked } == { model_b | show = Nothing, result = NotAsked }
+            { model_a | show = Nothing, result = NotAsked, typeahead = model_b.typeahead } == { model_b | show = Nothing, result = NotAsked, typeahead = model_b.typeahead }
 
         ( Flakes (OptionModel model_a), Flakes (OptionModel model_b) ) ->
-            { model_a | show = Nothing, result = NotAsked } == { model_b | show = Nothing, result = NotAsked }
+            { model_a | show = Nothing, result = NotAsked, typeahead = model_b.typeahead } == { model_b | show = Nothing, result = NotAsked, typeahead = model_b.typeahead }
 
         ( Flakes (PackagesModel model_a), Flakes (PackagesModel model_b) ) ->
-            { model_a | show = Nothing, result = NotAsked } == { model_b | show = Nothing, result = NotAsked }
+            { model_a | show = Nothing, result = NotAsked, typeahead = model_b.typeahead } == { model_b | show = Nothing, result = NotAsked, typeahead = model_b.typeahead }
 
         _ ->
             False
@@ -280,7 +283,7 @@ changeRouteTo currentModel url =
                         _ ->
                             Nothing
             in
-            Page.Packages.init searchArgs currentModel.defaultNixOSChannel currentModel.nixosChannels modelPage
+            Page.Packages.init currentModel.elasticsearch currentModel.typeaheadEnabled searchArgs currentModel.defaultNixOSChannel currentModel.nixosChannels modelPage
                 |> updateWith Packages PackagesMsg model
                 |> avoidReinit
                 |> attemptQuery
@@ -295,7 +298,7 @@ changeRouteTo currentModel url =
                         _ ->
                             Nothing
             in
-            Page.Options.init searchArgs currentModel.defaultNixOSChannel currentModel.nixosChannels modelPage
+            Page.Options.init currentModel.elasticsearch currentModel.typeaheadEnabled searchArgs currentModel.defaultNixOSChannel currentModel.nixosChannels modelPage
                 |> updateWith Options OptionsMsg model
                 |> avoidReinit
                 |> attemptQuery
@@ -310,7 +313,7 @@ changeRouteTo currentModel url =
                         _ ->
                             Nothing
             in
-            Page.Flakes.init searchArgs currentModel.defaultNixOSChannel currentModel.nixosChannels modelPage
+            Page.Flakes.init currentModel.elasticsearch currentModel.typeaheadEnabled searchArgs currentModel.defaultNixOSChannel currentModel.nixosChannels modelPage
                 |> updateWith Flakes FlakesMsg model
                 |> avoidReinit
                 |> attemptQuery

frontend/src/Page/Flakes.elm

@@ -51,22 +51,29 @@ type Model
 
 
 init :
-    Route.SearchArgs
+    Search.Options
+    -> Bool
+    -> Route.SearchArgs
     -> String
     -> List NixOSChannel
     -> Maybe Model
     -> ( Model, Cmd Msg )
-init searchArgs defaultNixOSChannel nixosChannels model =
+init options typeaheadEnabled searchArgs defaultNixOSChannel nixosChannels model =
     let
         --  init with respective module or with packages by default
         searchType : SearchType
         searchType =
             Maybe.withDefault PackageSearch searchArgs.type_
+
+        -- The Flakes page uses an aggregate flake index that the typeahead
+        -- module does not currently support; keep it disabled here.
+        flakesTypeaheadEnabled =
+            False
     in
     case searchType of
         OptionSearch ->
             Tuple.mapBoth OptionModel (Cmd.map OptionsMsg) <|
-                Page.Options.init searchArgs defaultNixOSChannel nixosChannels <|
+                Page.Options.init options flakesTypeaheadEnabled searchArgs defaultNixOSChannel nixosChannels <|
                     case model of
                         Just (OptionModel model_) ->
                             Just model_
@@ -76,7 +83,7 @@ init searchArgs defaultNixOSChannel nixosChannels model =
 
         PackageSearch ->
             Tuple.mapBoth PackagesModel (Cmd.map PackagesMsg) <|
-                Page.Packages.init searchArgs defaultNixOSChannel nixosChannels <|
+                Page.Packages.init options flakesTypeaheadEnabled searchArgs defaultNixOSChannel nixosChannels <|
                     case model of
                         Just (PackagesModel model_) ->
                             Just model_
@@ -179,7 +186,7 @@ view nixosChannels model =
                     )
                 )
                 [ h1 [] bodyTitle
-                , viewSearchInput nixosChannels outMsg categoryName Nothing model_.query
+                , viewSearchInput nixosChannels outMsg categoryName Nothing model_.query Nothing
                 , viewResult nixosChannels outMsg categoryName model_ viewSuccess viewBuckets <|
                     viewFlakes outMsg model_.searchType
                 ]

frontend/src/Page/Options.elm

@@ -105,17 +105,22 @@ type alias AggregationsAll =
 
 
 init :
-    Route.SearchArgs
+    Search.Options
+    -> Bool
+    -> Route.SearchArgs
     -> String
     -> List NixOSChannel
     -> Maybe Model
     -> ( Model, Cmd Msg )
-init searchArgs defaultNixOSChannel nixosChannels model =
+init options typeaheadEnabled searchArgs defaultNixOSChannel nixosChannels model =
     let
         ( newModel, newCmd ) =
-            Search.init searchArgs defaultNixOSChannel nixosChannels model
+            Search.init options typeaheadEnabled searchArgs defaultNixOSChannel nixosChannels model
     in
-    ( newModel
+    -- The Options page always queries options, regardless of `args.type_`
+    -- (which defaults to `PackageSearch`). Pin `searchType` so the typeahead
+    -- targets option fields.
+    ( { newModel | searchType = Route.OptionSearch }
     , Cmd.map SearchMsg newCmd
     )
 

frontend/src/Page/Packages.elm

@@ -184,17 +184,19 @@ initBuckets bucketsAsString =
 
 
 init :
-    Route.SearchArgs
+    Search.Options
+    -> Bool
+    -> Route.SearchArgs
     -> String
     -> List NixOSChannel
     -> Maybe Model
     -> ( Model, Cmd Msg )
-init searchArgs defaultNixOSChannel nixosChannels model =
+init options typeaheadEnabled searchArgs defaultNixOSChannel nixosChannels model =
     let
         ( newModel, newCmd ) =
-            Search.init searchArgs defaultNixOSChannel nixosChannels model
+            Search.init options typeaheadEnabled searchArgs defaultNixOSChannel nixosChannels model
     in
-    ( newModel
+    ( { newModel | searchType = Route.PackageSearch }
     , Cmd.map SearchMsg newCmd
     )
 

frontend/src/Search.elm

@@ -72,7 +72,10 @@ import Html.Attributes
         )
 import Html.Events
     exposing
-        ( onClick
+        ( on
+        , onBlur
+        , onClick
+        , onFocus
         , onInput
         , onSubmit
         )
@@ -89,6 +92,7 @@ import Route
         , allTypes
         , searchTypeToTitle
         )
+import Search.Typeahead as Typeahead
 import Set exposing (Set)
 import Task
 
@@ -108,6 +112,8 @@ type alias Model a b =
     , searchType : Route.SearchType
     , redirectedChannel : Maybe String
     , excludedOptionSources : Set String
+    , options : Options
+    , typeahead : Typeahead.Model
     }
 
 
@@ -287,12 +293,14 @@ decodeResolvedFlake =
 
 
 init :
-    Route.SearchArgs
+    Options
+    -> Bool
+    -> Route.SearchArgs
     -> String
     -> List NixOSChannel
     -> Maybe (Model a b)
     -> ( Model a b, Cmd (Msg a b) )
-init args defaultNixOSChannel nixosChannels maybeModel =
+init options typeaheadEnabled args defaultNixOSChannel nixosChannels maybeModel =
     let
         getField getFn default =
             maybeModel
@@ -346,6 +354,8 @@ init args defaultNixOSChannel nixosChannels maybeModel =
             args.type_
                 |> Maybe.withDefault defaultSearchArgs.searchType
       , excludedOptionSources = args.excludedOptionSources
+      , options = options
+      , typeahead = Typeahead.init typeaheadEnabled
       }
         |> ensureLoading nixosChannels
     , Browser.Dom.focus "search-query-input" |> Task.attempt (\_ -> NoOp)
@@ -415,6 +425,9 @@ type Msg a b
     | ChangePage Int
     | ShowInstallDetails Details
     | SetOptionSourceIncluded OptionSource Bool
+    | TypeaheadMsg Typeahead.Msg
+    | TypeaheadBlur
+    | TypeaheadFocus
 
 
 type Details
@@ -505,15 +518,26 @@ update toRoute navKey msg model nixosChannels =
                 |> pushUrl toRoute navKey
 
         QueryInput query ->
-            ( { model | query = query }
-            , Cmd.none
+            let
+                ( typeaheadModel, typeaheadCmd ) =
+                    Typeahead.queryChanged
+                        model.options
+                        nixosChannels
+                        model.searchType
+                        model.channel
+                        query
+                        model.typeahead
+            in
+            ( { model | query = query, typeahead = typeaheadModel }
+            , Cmd.map TypeaheadMsg typeaheadCmd
             )
 
         QueryInputSubmit ->
             { model
                 | from = 0
                 , show = Nothing
                 , buckets = Nothing
+                , typeahead = Typeahead.hideModel model.typeahead
             }
                 |> ensureLoading nixosChannels
                 |> pushUrl toRoute navKey
@@ -545,6 +569,30 @@ update toRoute navKey msg model nixosChannels =
             { model | showInstallDetails = details }
                 |> pushUrl toRoute navKey
 
+        TypeaheadBlur ->
+            ( model, Cmd.map TypeaheadMsg Typeahead.hideAfterBlur )
+
+        TypeaheadFocus ->
+            ( { model | typeahead = Typeahead.focusModel model.typeahead }
+            , Cmd.none
+            )
+
+        TypeaheadMsg subMsg ->
+            let
+                ( typeaheadModel, typeaheadCmd ) =
+                    Typeahead.update
+                        model.options
+                        nixosChannels
+                        model.searchType
+                        model.channel
+                        model.query
+                        subMsg
+                        model.typeahead
+            in
+            ( { model | typeahead = typeaheadModel }
+            , Cmd.map TypeaheadMsg typeaheadCmd
+            )
+
         SetOptionSourceIncluded source included ->
             let
                 id =
@@ -815,7 +863,7 @@ view { categoryName } title nixosChannels model viewSuccess viewBuckets outMsg s
             )
         )
         ([ h1 [] title
-         , viewSearchInput nixosChannels outMsg categoryName (Just model.channel) model.query
+         , viewSearchInput nixosChannels outMsg categoryName (Just model.channel) model.query (Just model.typeahead)
          ]
             ++ (case model.redirectedChannel of
                     Just oldChannel ->
@@ -1028,23 +1076,33 @@ viewSearchInput :
     -> String
     -> Maybe String
     -> String
+    -> Maybe Typeahead.Model
     -> Html c
-viewSearchInput nixosChannels outMsg categoryName selectedChannel searchQuery =
+viewSearchInput nixosChannels outMsg categoryName selectedChannel searchQuery typeahead =
     form
         [ onSubmit (outMsg QueryInputSubmit)
         , class "search-input"
         ]
         (div []
-            [ div []
+            [ div [ class "search-input-with-typeahead" ]
                 [ input
                     [ type_ "text"
                     , id "search-query-input"
                     , autofocus True
                     , placeholder <| "Search for " ++ categoryName
                     , onInput (outMsg << QueryInput)
+                    , onFocus (outMsg TypeaheadFocus)
+                    , onBlur (outMsg TypeaheadBlur)
+                    , on "keydown" (escapeKeyDecoder (outMsg (TypeaheadMsg Typeahead.hide)))
                     , value searchQuery
                     ]
                     []
+                , case typeahead of
+                    Just t ->
+                        Typeahead.viewDropdown t
+
+                    Nothing ->
+                        text ""
                 ]
             , button [ class "btn", type_ "submit" ]
                 [ text "Search" ]
@@ -1621,3 +1679,19 @@ trapClick : Html.Attribute (Msg a b)
 trapClick =
     Html.Events.stopPropagationOn "click" <|
         Json.Decode.succeed ( NoOp, True )
+
+
+{-| Resolves to the supplied message when the Escape key is pressed; fails
+the decoder otherwise so other keystrokes pass through unchanged.
+-}
+escapeKeyDecoder : c -> Json.Decode.Decoder c
+escapeKeyDecoder msg =
+    Json.Decode.field "key" Json.Decode.string
+        |> Json.Decode.andThen
+            (\k ->
+                if k == "Escape" then
+                    Json.Decode.succeed msg
+
+                else
+                    Json.Decode.fail "not Escape"
+            )