Only display certain views when they are useful.

Use sane defaults for cache hierarchies.
Use relative links.
2019-05-29 19:11:37 -07:00 · 2019-05-29 19:11:25 -07:00 · 2019-05-29 19:11:04 -07:00 · 2019-05-29 18:37:31 -07:00 · 2019-05-29 18:29:18 -07:00
5 changed files with 114 additions and 199 deletions
--- a/index.html
+++ b/index.html
@ -1,7 +1,8 @@
 <html>
    <head>
-        <script src="/static/js/elm.js"></script>
-        <link rel="stylesheet" href="/static/css/style.css">
+        <script src="static/js/elm.js"></script>
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+        <link rel="stylesheet" href="static/css/style.css">
    </head>
    <body>
        <div id="elm"></div>
--- a/src/CacheSim/Update.elm
+++ b/src/CacheSim/Update.elm
@ -16,7 +16,7 @@ updateChangeRawModel l f m =
 updateCreateRawModel : Model -> (Model, Cmd Msg)
 updateCreateRawModel m =
    let
-        freshRawModel = { blockSize = "", setCount = "", setSize = "" }
+        freshRawModel = { blockSize = "4", setCount = "4", setSize = "3" }
        newModel = { m | rawHierarchy = m.rawHierarchy ++ [ freshRawModel ] }
        cmd = Cmd.none
    in
--- a/src/CacheSim/View.elm
+++ b/src/CacheSim/View.elm
@ -4,29 +4,67 @@ import CacheSim.Model exposing (..)
 import CacheSim.Cache exposing (..)
 import CacheSim.AccessView exposing (..)
 import CacheSim.Hierarchy exposing (..)
-import Html exposing (Html, input, text, div, label, span, h2, h3, table, tr, td)
-import Html.Attributes exposing (type_, class, value, for, classList, disabled, colspan)
+import Html exposing (Html, Attribute, input, text, div, label, span, h2, h3, table, tr, td, th, p, h1)
+import Html.Attributes exposing (type_, class, value, for, classList, disabled, colspan, hidden)
 import Html.Events exposing (onInput, onClick)

-optionalButton : Bool -> String -> Msg -> Html Msg
-optionalButton e s m =
-    let
-        events = if e then [ onClick m ] else  [ disabled (not e) ]
-    in
-        input ([ type_ "button", value s ] ++ events) []
+-- Button components, powered by Bootstrap
+basicButton : List (Attribute Msg) -> String -> Html Msg
+basicButton attrs s = input ([ type_ "button", value s, class "btn", class "btn-info" ] ++ attrs) []
+
+disabledButton : String -> Html Msg
+disabledButton = basicButton [ disabled True ]
+
+advancedButton : List (Attribute Msg) -> String -> Msg -> Html Msg
+advancedButton attrs s m = basicButton (attrs ++ [ onClick m ]) s

 button : String -> Msg -> Html Msg
-button s m = input [ type_ "button", onClick m, value s] []
+button s m = basicButton [ onClick m ] s

+dangerButton : String -> Msg -> Html Msg
+dangerButton = advancedButton [ class "btn-danger" ]
+
+primaryButton : String -> Msg -> Html Msg
+primaryButton = advancedButton [ class "btn-primary" ]
+
+secondaryButton : String -> Msg -> Html Msg
+secondaryButton = advancedButton [ class "btn-secondary" ]
+
+maybeButton : Maybe a -> String -> (a -> Msg) -> Html Msg
+maybeButton m s f =
+    case m of
+        Just v -> button s (f v)
+        _ -> disabledButton s 
+
+resultButton : Result e a -> String -> (a -> Msg) -> Html Msg
+resultButton = maybeButton << Result.toMaybe
+
+-- Button wrapper (button group)
 buttonWrapper : List (Html Msg) -> Html Msg
-buttonWrapper = div [ class "button-wrapper" ]
+buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True) ] ]

+-- Input with a label
 labeledInput : String -> String -> (String -> Msg) -> Html Msg
 labeledInput s val f =
-    div [ class "input-group" ]
-        [ span [] [ text s ]
-        , input [ value val, type_ "text", onInput f ] []
+    div [ class "input-group mb-3" ]
+        [ div [ class "input-group-prepend" ]
+            [ span [ class "input-group-text" ] [ text s ]
            ]
+        , input [ value val, type_ "text", class "form-control", onInput f ] []
+        ]
+
+-- Error view
+viewError : Bool -> String -> Html Msg
+viewError hide e = div
+    [ classList
+        [ ("alert", True)
+        , ("alert-danger", True)
+        ]
+    , hidden hide
+    ] [ text e ]
+
+panel : List (Html Msg) -> Html Msg
+panel = div [ classList [("card", True), ("p-3", True), ("mb-3", True) ] ]

 viewRawCacheModel : Int -> RawCacheModel -> Html Msg
 viewRawCacheModel level rcm =
@ -36,15 +74,15 @@ viewRawCacheModel level rcm =
        updateSetSize s cm = { cm | setSize = s}
        wrapUpdate f s = ChangeRawModel level (f s)

-        deleteButton = button "Delete" (DeleteRawModel level)
+        deleteButton = dangerButton "Delete" (DeleteRawModel level)

-        params = div [ class "cache-model-params" ]
+        params = div []
            [ labeledInput "Block size" rcm.blockSize (wrapUpdate updateBlockSize)
            , labeledInput "Set count" rcm.setCount (wrapUpdate updateSetCount)
            , labeledInput "Set size" rcm.setSize (wrapUpdate updateSetSize)
            ]
    in
-        div [ class "cache-model" ]
+        panel
            [ h3 [] [ text <| "L" ++ String.fromInt (level + 1) ++ " Cache" ]
            , buttonWrapper [ deleteButton ]
            , params
@ -57,21 +95,15 @@ viewRawCacheModelHierarchy rcmh =
            <| List.indexedMap viewRawCacheModel rcmh
        translationResult = Result.andThen validateCacheModelHierarchy
            <| translateRawCacheModelHierarchy rcmh
-        isValid =
-            case translationResult of
-                Ok _ -> True
-                Err _ -> False
        errorHtml =
            case translationResult of
                Ok _ -> viewError True ""
                Err e -> viewError False e
        
        newButton = button "Add level" CreateRawModel
-        useButton = case translationResult of
-            Ok cmh -> optionalButton True "Use hierarchy" (UseHierarchy <| Just cmh)
-            Err _ -> optionalButton False "Use hierarchy" (UseHierarchy Nothing)
+        useButton = resultButton translationResult "Use hierarchy" (UseHierarchy << Just) 
    in
-        div [ class "cache-model-hierarchy" ]
+        div []
            [ h2 [] [ text "Cache hierarchy" ]
            , errorHtml
            , buttonWrapper [ newButton, useButton ]
@ -84,14 +116,14 @@ viewCache level (cm, cs) =
        slotLabels =
            List.indexedMap (\i _ -> td [] [ text <| String.fromInt i ])
            <| List.repeat cm.setSize ()
-        slotLabel = td [ colspan cm.setSize ] [ text "Slot" ]
+        slotLabel = th [ colspan cm.setSize ] [ text "Slot" ]
        allSlotLabels = List.concat <| List.repeat cm.setCount slotLabels
        allSlotsLabel = List.repeat cm.setCount slotLabel

        setLabels =
            List.indexedMap (\i _ -> td [ colspan cm.setSize ] [ text <| String.fromInt i ])
            <| List.repeat cm.setCount ()
-        setLabel = [ td [ colspan <| cm.setSize * cm.setCount ] [ text "Set" ] ]
+        setLabel = [ th [ colspan <| cm.setSize * cm.setCount ] [ text "Set" ] ]
        setRow set =
            let
                slotHtml s =
@ -102,43 +134,42 @@ viewCache level (cm, cs) =
                List.map slotHtml set
        cacheRow = List.concat <| List.map setRow cs
        cacheTable =
-            table []
-                [ tr [ classList [("hidden", cm.setCount == 1)] ] setLabel
-                , tr [ classList [("hidden", cm.setCount == 1)] ] setLabels
-                , tr [ classList [("hidden", cm.setSize == 1)] ] allSlotsLabel
-                , tr [ classList [("hidden", cm.setSize == 1)] ] allSlotLabels
+            table [ class "table" ]
+                [ tr [ hidden (cm.setCount == 1), class "table-info" ] setLabel
+                , tr [ hidden (cm.setCount == 1) ] setLabels
+                , tr [ hidden (cm.setSize == 1), class "table-info" ] allSlotsLabel
+                , tr [ hidden (cm.setSize == 1) ] allSlotLabels
                , tr [] cacheRow
                ]

    in
-        div [ class "cache" ]
-            [ h3 [] [ text <| "L" ++ String.fromInt level ++ " Cache" ]
+        panel
+            [ h3 [] [ text <| "L" ++ String.fromInt (level + 1) ++ " Cache" ]
            , cacheTable
            ]

 viewCacheHierarchy : CacheHierarchy -> Html Msg
 viewCacheHierarchy ch =
    let
-        levels = div [ class "cache-levels" ] 
+        levels = div [] 
            <| List.indexedMap viewCache ch
    in
-    div [ class "cache-hierarchy" ] <|
-        [ h2 [] [ text <| "Cache State" ]
-        , levels
-        ]
+        levels
        
 viewAccessView : Model -> AccessView -> Html Msg
 viewAccessView m av =
    let
        currentCache = Maybe.withDefault [] m.hierarchy
    in
-        div [ class "access-view" ]
+        div []
            [ h2 [] [ text "Access Simulation" ]
            , buttonWrapper
-                [ button "Forward" AccessViewForward
-                , button "Back" AccessViewBack
+                [ primaryButton "Back" AccessViewBack
+                , primaryButton "Forward" AccessViewForward
                ]
+            , h3 [] [ text "Access event log" ]
            , viewAccessLog av
+            , h3 [] [ text "Current cache state" ]
            , viewCacheHierarchy <| effectiveCacheHierarchy currentCache av
            ]   

@ -146,11 +177,10 @@ viewAccessLog : AccessView -> Html Msg
 viewAccessLog (aes, ap) =
    let
        resultSpan r =
-            case r of
-                Hit -> span [ class "success" ] [ text "HIT" ]
-                Miss -> span [ class "failure" ] [ text "MISS" ]
+            span [ classList [ ("badge", True), ("badge-success", r == Hit), ("badge-danger", r == Miss) ] ]
+                [ text <| if r == Hit then "Hit" else "Miss" ]
        downEvent n ae = div [ class "event" ]
-            [ text <| "L" ++ String.fromInt (n + 1)
+            [ text <| "L" ++ String.fromInt (n + 1) ++ " "
            , resultSpan ae.result
            ]
        upEvent n ae = div [ class "event" ]
@ -163,35 +193,48 @@ viewAccessLog (aes, ap) =
                Up n -> List.indexedMap downEvent aes ++
                    (List.indexedMap upEvent <| List.drop n aes)
    in
-        div [ class "access-log" ]
-            [ h3 [] [ text "Simulation events" ]
-            , div [ class "access-log-events" ] events
-            ]
+        div [] events

 viewAccessInput : Model -> Html Msg
 viewAccessInput m =
    let
-        accessButton =
-            case String.toInt m.accessInput of
-                Just i -> optionalButton True "Access address" (Access i)
-                Nothing -> optionalButton False "Access address" (Access -1)
+        accessButton = maybeButton (String.toInt m.accessInput) "Access address" Access
+        editHierarchyButton = button "Edit hierarchy" (UseHierarchy Nothing)
    in
-        div [ class "access-input" ]
+        div []
            [ h2 [] [ text "Run access simulation" ]
-            , div [ class "note" ]
-                [ text  "Please make sure to click \"Use Hierarchy\" to load a hierarchy to simulate."
-                ]
            , labeledInput "Access address" m.accessInput ChangeAccessInput
-            , accessButton 
+            , buttonWrapper [ accessButton, editHierarchyButton ]
            ]

-viewError : Bool -> String -> Html Msg
-viewError hide e = div [ classList [ ("hidden", hide), ("error", True) ] ] [ text e ]
+viewDescription : Html Msg
+viewDescription =
+    div []
+        [ h1 [] [ text "Cache simulator" ]
+        , p []
+            [ text <| "This is a simulator for testing various cache configurations for educational purposes. It allows for the creation of"
+                ++ " n-way associative caches, and their special cases (direct mapped and fully associative caches)."
+            ]
+        , p []
+            [ text <| "To use the simulator, first create a fitting cache configuration by using the \"Add level\" button,"
+                ++ " as well as the settings provided by each individual cache level. When the cache is correctly specified, and"
+                ++ " no warnings appear, click \"Use hierarchy\" to load the specified hierarchy and begin simulating. To simulate,"
+                ++ " type a block address into the \"Access address\" field, and click \"Access\". This will bring forward the simulation"
+                ++ " view, which will allow you to step through the steps of accessing a cache."
+            ]
+        ]

 viewBase : Model -> Html Msg
 viewBase m =
    let
-        rawView = viewRawCacheModelHierarchy m.rawHierarchy
+        rawView = 
+            case m.hierarchy of
+                Nothing -> [ viewRawCacheModelHierarchy m.rawHierarchy ]
+                Just _ -> []
+        accessInputView =
+            case (m.hierarchy, m.accessView) of
+                (Just _, Nothing) -> [ viewAccessInput m ]
+                _ -> []
        cacheView =
            case m.accessView of
                Nothing ->
@ -199,6 +242,6 @@ viewBase m =
                        <| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy
                Just _ -> []
        accessView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewAccessView m) <| m.accessView
-        accessInputView = [ viewAccessInput m ]
    in
-        div [] <| [ rawView ] ++ cacheView ++ accessView ++ accessInputView
+        div [ class "container" ]
+            <| [ viewDescription] ++ rawView ++ accessInputView ++ accessView ++ cacheView
--- a/src/Main.elm
+++ b/src/Main.elm
@ -8,15 +8,11 @@ import CacheSim.View exposing (..)
 import Browser exposing (Document, document)
 import Html exposing (text)

-testCacheModelHierarchy =
-    [ { blockSize = "128", setCount = "8", setSize = "1" }
-    ]
-
 init : Flags -> (Model, Cmd Msg)
 init f =
    let
        initialModel =
-            { rawHierarchy = testCacheModelHierarchy
+            { rawHierarchy = []
            , hierarchy = Nothing
            , accessView = Nothing
            , accessInput = ""
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@ -1,128 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
-$primary-color: lighten(#26c176, 30%);
-
-body {
-    font-family: Raleway, serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.hidden {
-    display: none;
-}
-
-.input-group {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-
-    span {
-        margin-right: 10px;
-    }
-
-    input {
-        flex-grow: 1;
-    }
-}
-
-input[type="text"] {
-    padding: 5px;
-    border-radius: 5px;
-    border: none;
-    background-color: #efefef;
-
-    &:active, &:focus {
-        background-color: $primary-color;
-        transition: .25s;
-    }
-}
-
-.error {
-    box-sizing: border-box;
-    padding: 5px;
-    border-radius: 5px;
-    margin-bottom: 10px;
-    border: 2px solid tomato;
-    color: tomato;
-}
-
-.note {
-    box-sizing: border-box;
-    padding: 5px;
-    border-radius: 5px;
-    margin-bottom: 10px;
-}
-
-span.success {
-    margin-left: 10px;
-    color: green;
-}
-
-span.failure {
-    margin-left: 10px;
-    color: tomato;
-}
-
-button, input[type="button"] {
-    box-sizing: border-box;
-    border: none;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    display: inline-block;
-    padding: 5px;
-    border-radius: 5px;
-    font-size: 14px;
-
-    &:hover, &:focus {
-        background-color: $primary-color;
-        transition: .25s;
-
-        &:disabled {
-            background-color: lightgrey;
-        }
-    }
-
-}
-
-.cache-model-levels {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.cache-model {
-    max-width: 600px;
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid lightgrey;
-    margin: 5px;
-}
-
-.cache, .cache-model {
-    padding: 10px;
-    border-radius: 5px;
-    border: 2px solid lightgrey;
-    margin: 5px;
-}
-
-.cache-model-hierarchy, .cache-hierarchy, .access-input {
-    margin-bottom: 10px;
-}
-
-table {
-    width: 100%;
-}
-
-tr {
-    &:nth-child(1), &:nth-child(3) {
-        background-color: $primary-color;
-    }
-}
-
-td {
-    text-align: center;
-    padding: 3px;
+.btn-group {
+    width: min-content;
 }
Author	SHA1	Message	Date
Danila Fedorin	b96c16918b	Only display certain views when they are useful.	2019-05-29 19:11:37 -07:00
Danila Fedorin	23ff56ef82	Use sane defaults for cache hierarchies.	2019-05-29 19:11:25 -07:00
Danila Fedorin	0552a715db	Use relative links.	2019-05-29 19:11:04 -07:00
Danila Fedorin	0cb9eb34d0	Add an info view.	2019-05-29 18:37:31 -07:00
Danila Fedorin	6a06a99529	Use bootstrap styles. Better than anything I can do in a short period of time!	2019-05-29 18:29:18 -07:00