Add some visual changes to improve usability

src/CacheSim/Model.elm

@@ -17,5 +17,6 @@ type Msg
     | UseHierarchy (Maybe CacheModelHierarchy)
     | Access (List Int)
     | ChangeAccessInput String
+    | AccessViewCancel
     | AccessViewForward
     | AccessViewBack

src/CacheSim/Update.elm

@@ -60,6 +60,14 @@ updateAccess li m =
     in
         (newModel, cmd)
 
+updateAccessViewCancel : Model -> (Model, Cmd Msg)
+updateAccessViewCancel m =
+    let
+        newModel = { m | accessView = Nothing }
+        cmd = Cmd.none
+    in
+        (newModel, cmd)
+
 updateAccessViewForward : Model -> (Model, Cmd Msg)
 updateAccessViewForward m =
     let

src/CacheSim/View.elm

@@ -39,7 +39,10 @@ resultButton = maybeButton << Result.toMaybe
 
 -- Button wrapper (button group)
 buttonWrapper : List (Html Msg) -> Html Msg
-buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True) ] ]
+buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True), ("mr-3", True) ] ]
+
+buttonToolbar : List (List (Html Msg)) -> Html Msg
+buttonToolbar ll = div [ class "btn-toolbar" ] <| List.map buttonWrapper ll
 
 -- Input with a label
 labeledInput : String -> String -> (String -> Msg) -> Html Msg
@@ -163,9 +166,9 @@ viewAccessView m av =
     div []
         [ h2 [] [ text "Access Simulation" ]
         , p [] [ text ("Simulating access of address " ++ String.fromInt av.blockAddr) ]
-        , buttonWrapper
-            [ primaryButton "Back" AccessViewBack
-            , primaryButton "Forward" AccessViewForward
+        , buttonToolbar
+            [ [ primaryButton "Back" AccessViewBack, primaryButton "Forward" AccessViewForward ]
+            , [ dangerButton "Stop" AccessViewCancel ]
             ]
         , h3 [] [ text "Access event log" ]
         , viewAccessLog av
@@ -221,7 +224,7 @@ viewAccessInput m =
             case checkedResult of
                 Ok _ -> viewError True ""
                 Err e -> viewError False e
-        editHierarchyButton = secondaryButton "Edit hierarchy" (UseHierarchy Nothing)
+        editHierarchyButton = button [ onClick (UseHierarchy Nothing), class "btn-dark" ] "Edit hierarchy"
     in
         div []
             [ h2 [] [ text "Run access simulation" ]

src/Main.elm

@@ -35,6 +35,7 @@ update msg m =
         UseHierarchy cmh -> updateUseHierarchy cmh m
         Access i -> updateAccess i m
         ChangeAccessInput s -> ({ m | accessInput = s }, Cmd.none)
+        AccessViewCancel -> updateAccessViewCancel m
         AccessViewForward -> updateAccessViewForward m
         AccessViewBack -> updateAccessViewBack m
 

static/scss/style.scss

@@ -1,3 +1,7 @@
 .btn-group {
     width: min-content;
 }
+
+.btn:focus {
+    box-shadow: none;
+}