highlight selected range on time graphs when active

frontend/src/Main.elm

@@ -215,8 +215,20 @@ timeTick duration =
 
 type alias Colour = String
 
-measureView : String -> Colour -> (Point -> Maybe Float) -> List Point -> Svg Msg
+selectionRect selection =
-measureView title colour fn points =
+    case selection of
+        Nothing -> g [] []
+        Just (left, right) ->
+            rect [ fill "#fdd"
+                 , S.x (String.fromInt left)
+                 , S.y "0"
+                 , width  (right - left)
+                 , S.height "100%"
+                 ] []
+
+
+measureView : String -> Colour -> (Point -> Maybe Float) -> Maybe (Float, Float) -> List Point -> Svg Msg
+measureView title colour fn selection points =
     let graphHeight = 180
         startTime = Maybe.withDefault 0 (Point.startTime points)
         coords p = case (fn p) of
@@ -232,6 +244,11 @@ measureView title colour fn points =
         string = String.concat (List.map coords points)
         ttick = timeTick maxX
         firstTimeTick = (toFloat (floor(startTime / ttick))) * ttick - startTime
+        scaledMarks = Maybe.map
+                      (\(s, e) ->
+                           (floor((s - startTime) * portalWidth/maxX),
+                                floor((e - startTime) * portalWidth/maxX)))
+                      selection
         ybar n = line
                  [ fill "none"
                  , style "vector-effect" "non-scaling-stroke"
@@ -279,6 +296,7 @@ measureView title colour fn points =
               , fill "#f8f8ff"
               , stroke "none"
               ] []
+        , selectionRect scaledMarks
         , g
           [ stroke colour
           , strokeWidth "2"
@@ -351,7 +369,7 @@ handleDragMark model e =
         _ -> Dribble "drag with unknown target"
 
 
-timeAxis model points =
+timeAxis model selection points =
     let graphHeight = 30
         startTime = Maybe.withDefault 0 (Point.startTime points)
         maxX = Point.duration points
@@ -419,10 +437,14 @@ timeAxis model points =
         , viewBox ("0 -10 " ++ (String.fromInt portalWidth) ++
                        "  " ++ (String.fromInt (graphHeight + 10)))
         ]
-        (bg::(markStart markStartPix)::(markEnd markEndPix)::xticks)
+        [ bg
+        , (markStart markStartPix)
+        , (markEnd markEndPix)
+        , g [] xticks
+        ]
 
 
-cadenceView : List Point -> Svg Msg
+cadenceView :  Maybe (Float, Float) -> List Point -> Svg Msg
 cadenceView =
     measureView "cadence" "#44ee44" (.cadence >> Maybe.map toFloat)
 
@@ -430,8 +452,8 @@ powerView = measureView "power" "#994444" (.power >> Maybe.map toFloat)
 
 eleView = measureView "elevation" "#4444ee" (.pos >> .ele)
 
-trackView : Int -> Int -> ZoomLevel -> List Point -> Svg Msg
+trackView : Int -> Int -> ZoomLevel -> Maybe (Float, Float) -> List Point -> Svg Msg
-trackView leftedge topedge zoom points =
+trackView leftedge topedge zoom selection points =
     let plot p =
             let (x, y) = pixelFromCoord (toCoord p.pos) zoom
                 x_ = x - leftedge
@@ -461,14 +483,14 @@ trackView leftedge topedge zoom points =
 
 px x = String.fromInt x ++ "px"
 
-ifTrack : Model -> (List Point ->  Html msg) ->  Html msg
+ifTrack : Model -> ( Maybe (Float, Float) -> List Point -> Html msg) ->  Html msg
 ifTrack model content =
     case model.track of
         Present t ->
             let start = model.startTime
                 points = Point.subseq t start model.duration |>
                          Point.downsample 300
-            in  content points
+            in  content (Model.marks model) points
         Failure f -> Debug.log f (div [] [ Html.text "failure", Html.text f])
         Loading -> div [] [Html.text "loading"]
         Empty -> div [] [Html.text "no points"]

frontend/src/Model.elm

@@ -4,6 +4,8 @@ module Model exposing
     , TrackState(..)
     , DragState(..)
     , empty
+    , isMarkActive
+    , marks
     )
 import TileMap exposing (ZoomLevel(..), Coord, toCoord)
 import Point exposing (Point)
@@ -34,3 +36,12 @@ empty = Model
         0 0
         0 0
         Loading
+
+isMarkActive model =
+    model.leftMark > model.startTime ||
+        model.rightMark < (model.startTime + model.duration)
+
+marks model =
+    if isMarkActive model
+    then Just (model.leftMark, model.rightMark)
+    else Nothing