Grid with selectable rows

grid.elm

import StartApp.Simple as StartApp
import Mouse
import Html exposing(..)
import Html.Attributes exposing(style,attribute)
import Html.Events exposing(..)
import Signal exposing(..)

main =
  StartApp.start { model = model, view = view, update = update }

type GridState
  = AtRest
  | Selecting

type Action
  = NoOp
  | StartSelection CellID
  | StopSelection
  | SelectCell CellID
  | DeSelectCell CellID

type alias CellID = (Int,Int)

model = { currentState = AtRest, selected = [] }


view address model =
  let cellText = "A"
      gridCell =
        td [] [text cellText]
      gridRow =
        tr []
          (List.repeat 20 gridCell)
      borderStyle = 
        if model.currentState == Selecting 
        then attribute "bordercolor" "red" 
        else attribute "bordercolor" "black"
        
  in
    table [attribute "border" "1"
          , onMouseDown address StartSelection
          , onMouseUp address StopSelection
          , borderStyle]
      (List.repeat 10 gridRow)


update action model =
  case action of
    NoOp -> model
    StartSelection -> {model | currentState <- Selecting }
    StopSelection -> {model | currentState <- AtRest }

mouse_tracking.elm

import Mouse
import Html exposing(..)
import Html.Attributes exposing(style,attribute)
import Html.Events exposing(onMouseOver,onClick,onMouseEnter,onMouseLeave)
import Signal exposing(..)

positionWithButton2 = 
  Signal.map3 (,,) Mouse.isDown Mouse.position mouseEvents.signal
  |> Signal.filterMap positionIfDown (0,0)
  
--positionWithButton = 
--  Signal.map2 (,) Mouse.isDown Mouse.position
--  |> Signal.map positionIfDown

font : List (String, String)
font =
    [ ("font-family", "futura, sans-serif")
    , ("color", "red")
    , ("font-size", "2em")
    ]

type ElementAction 
  = Hover Int
  | NoHover

mouseEvents = Signal.mailbox NoHover
  
background : List (String, String)
background =
    [ ("background-color", "rgb(245, 245, 245)")
    ]
  
positionIfDown (isDown,position,hover) =
  case (isDown,hover) of
  (True, Hover x) -> Just (x,x)
  (True, NoHover) -> Just position
  (False, Hover x) -> Just position
  _ -> Nothing

type GridState
  = AtRest
  | Selecting

type GridActions
  = NoOp
  | StartSelection
  | StopSelection
  
tableEvents = Signal.mailbox 
makeElements el count children =
  List.map (\n -> el [] children) [1..count]

view pos =
  div [ ] 
    [ p [ style (font ++ background)] [text (toString pos)]
    , h1 [onMouseEnter mouseEvents.address (Hover 10)
         , onMouseLeave mouseEvents.address (NoHover)]
        [text "Magic"]
    , Html.button
        [ onClick mouseEvents.address NoHover]
        [text "Stop"]
    
    ]

view2 x =
  table [attribute "border" "1"]
    (makeElements tr 10 (makeElements td 20 [text "A"]))
    
main : Signal Html
main =
  Signal.map view2 positionWithButton2