ECE-472/CacheSim
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: ECE-472:b96c16918b9bf0c58711044eed7df4a03196d086
Branches Tags
ECE-472:master
..
compare: ECE-472:5710f10999bb0b7dd79a743c952eb4557396de8b
Branches Tags
ECE-472:master

No commits in common. "b96c16918b9bf0c58711044eed7df4a03196d086" and "5710f10999bb0b7dd79a743c952eb4557396de8b" have entirely different histories.
b96c16918b ... 5710f10999

5 changed files with 199 additions and 114 deletions
Show Stats Expand all files Collapse all files

5
index.html
View File

@ -1,8 +1,7 @@
<html> <html>
<head> <head>
<script src="static/js/elm.js"></script> <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">
<link rel="stylesheet" href="static/css/style.css">
</head> </head>
<body> <body>
<div id="elm"></div> <div id="elm"></div>

2
src/CacheSim/Update.elm
View File

@ -16,7 +16,7 @@ updateChangeRawModel l f m =
updateCreateRawModel : Model -> (Model, Cmd Msg) updateCreateRawModel : Model -> (Model, Cmd Msg)
updateCreateRawModel m = updateCreateRawModel m =
let let
freshRawModel = { blockSize = "4", setCount = "4", setSize = "3" } freshRawModel = { blockSize = "", setCount = "", setSize = "" }
newModel = { m | rawHierarchy = m.rawHierarchy ++ [ freshRawModel ] } newModel = { m | rawHierarchy = m.rawHierarchy ++ [ freshRawModel ] }
cmd = Cmd.none cmd = Cmd.none
in in

169
src/CacheSim/View.elm
View File

@ -4,67 +4,29 @@ import CacheSim.Model exposing (..)
import CacheSim.Cache exposing (..) import CacheSim.Cache exposing (..)
import CacheSim.AccessView exposing (..) import CacheSim.AccessView exposing (..)
import CacheSim.Hierarchy exposing (..) import CacheSim.Hierarchy exposing (..)
import Html exposing (Html, Attribute, input, text, div, label, span, h2, h3, table, tr, td, th, p, h1) 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, hidden) import Html.Attributes exposing (type_, class, value, for, classList, disabled, colspan)
import Html.Events exposing (onInput, onClick) import Html.Events exposing (onInput, onClick)
-- Button components, powered by Bootstrap optionalButton : Bool -> String -> Msg -> Html Msg
basicButton : List (Attribute Msg) -> String -> Html Msg optionalButton e s m =
basicButton attrs s = input ([ type_ "button", value s, class "btn", class "btn-info" ] ++ attrs) [] let
events = if e then [ onClick m ] else [ disabled (not e) ]
disabledButton : String -> Html Msg in
disabledButton = basicButton [ disabled True ] input ([ type_ "button", value s ] ++ events) []
advancedButton : List (Attribute Msg) -> String -> Msg -> Html Msg
advancedButton attrs s m = basicButton (attrs ++ [ onClick m ]) s
button : String -> Msg -> Html Msg button : String -> Msg -> Html Msg
button s m = basicButton [ onClick m ] s button s m = input [ type_ "button", onClick m, value 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 : List (Html Msg) -> Html Msg
buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True) ] ] buttonWrapper = div [ class "button-wrapper" ]
-- Input with a label
labeledInput : String -> String -> (String -> Msg) -> Html Msg labeledInput : String -> String -> (String -> Msg) -> Html Msg
labeledInput s val f = labeledInput s val f =
div [ class "input-group mb-3" ] div [ class "input-group" ]
[ div [ class "input-group-prepend" ] [ span [] [ text s ]
[ span [ class "input-group-text" ] [ text s ] , input [ value val, type_ "text", onInput f ] []
] ]
, 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 : Int -> RawCacheModel -> Html Msg
viewRawCacheModel level rcm = viewRawCacheModel level rcm =
@ -74,15 +36,15 @@ viewRawCacheModel level rcm =
updateSetSize s cm = { cm | setSize = s} updateSetSize s cm = { cm | setSize = s}
wrapUpdate f s = ChangeRawModel level (f s) wrapUpdate f s = ChangeRawModel level (f s)
deleteButton = dangerButton "Delete" (DeleteRawModel level) deleteButton = button "Delete" (DeleteRawModel level)
params = div [] params = div [ class "cache-model-params" ]
[ labeledInput "Block size" rcm.blockSize (wrapUpdate updateBlockSize) [ labeledInput "Block size" rcm.blockSize (wrapUpdate updateBlockSize)
, labeledInput "Set count" rcm.setCount (wrapUpdate updateSetCount) , labeledInput "Set count" rcm.setCount (wrapUpdate updateSetCount)
, labeledInput "Set size" rcm.setSize (wrapUpdate updateSetSize) , labeledInput "Set size" rcm.setSize (wrapUpdate updateSetSize)
] ]
in in
panel div [ class "cache-model" ]
[ h3 [] [ text <| "L" ++ String.fromInt (level + 1) ++ " Cache" ] [ h3 [] [ text <| "L" ++ String.fromInt (level + 1) ++ " Cache" ]
, buttonWrapper [ deleteButton ] , buttonWrapper [ deleteButton ]
, params , params
@ -95,15 +57,21 @@ viewRawCacheModelHierarchy rcmh =
<| List.indexedMap viewRawCacheModel rcmh <| List.indexedMap viewRawCacheModel rcmh
translationResult = Result.andThen validateCacheModelHierarchy translationResult = Result.andThen validateCacheModelHierarchy
<| translateRawCacheModelHierarchy rcmh <| translateRawCacheModelHierarchy rcmh
isValid =
case translationResult of
Ok _ -> True
Err _ -> False
errorHtml = errorHtml =
case translationResult of case translationResult of
Ok _ -> viewError True "" Ok _ -> viewError True ""
Err e -> viewError False e Err e -> viewError False e
newButton = button "Add level" CreateRawModel newButton = button "Add level" CreateRawModel
useButton = resultButton translationResult "Use hierarchy" (UseHierarchy << Just) useButton = case translationResult of
Ok cmh -> optionalButton True "Use hierarchy" (UseHierarchy <| Just cmh)
Err _ -> optionalButton False "Use hierarchy" (UseHierarchy Nothing)
in in
div [] div [ class "cache-model-hierarchy" ]
[ h2 [] [ text "Cache hierarchy" ] [ h2 [] [ text "Cache hierarchy" ]
, errorHtml , errorHtml
, buttonWrapper [ newButton, useButton ] , buttonWrapper [ newButton, useButton ]
@ -116,14 +84,14 @@ viewCache level (cm, cs) =
slotLabels = slotLabels =
List.indexedMap (\i _ -> td [] [ text <| String.fromInt i ]) List.indexedMap (\i _ -> td [] [ text <| String.fromInt i ])
<| List.repeat cm.setSize () <| List.repeat cm.setSize ()
slotLabel = th [ colspan cm.setSize ] [ text "Slot" ] slotLabel = td [ colspan cm.setSize ] [ text "Slot" ]
allSlotLabels = List.concat <| List.repeat cm.setCount slotLabels allSlotLabels = List.concat <| List.repeat cm.setCount slotLabels
allSlotsLabel = List.repeat cm.setCount slotLabel allSlotsLabel = List.repeat cm.setCount slotLabel
setLabels = setLabels =
List.indexedMap (\i _ -> td [ colspan cm.setSize ] [ text <| String.fromInt i ]) List.indexedMap (\i _ -> td [ colspan cm.setSize ] [ text <| String.fromInt i ])
<| List.repeat cm.setCount () <| List.repeat cm.setCount ()
setLabel = [ th [ colspan <| cm.setSize * cm.setCount ] [ text "Set" ] ] setLabel = [ td [ colspan <| cm.setSize * cm.setCount ] [ text "Set" ] ]
setRow set = setRow set =
let let
slotHtml s = slotHtml s =
@ -134,42 +102,43 @@ viewCache level (cm, cs) =
List.map slotHtml set List.map slotHtml set
cacheRow = List.concat <| List.map setRow cs cacheRow = List.concat <| List.map setRow cs
cacheTable = cacheTable =
table [ class "table" ] table []
[ tr [ hidden (cm.setCount == 1), class "table-info" ] setLabel [ tr [ classList [("hidden", cm.setCount == 1)] ] setLabel
, tr [ hidden (cm.setCount == 1) ] setLabels , tr [ classList [("hidden", cm.setCount == 1)] ] setLabels
, tr [ hidden (cm.setSize == 1), class "table-info" ] allSlotsLabel , tr [ classList [("hidden", cm.setSize == 1)] ] allSlotsLabel
, tr [ hidden (cm.setSize == 1) ] allSlotLabels , tr [ classList [("hidden", cm.setSize == 1)] ] allSlotLabels
, tr [] cacheRow , tr [] cacheRow
] ]
in in
panel div [ class "cache" ]
[ h3 [] [ text <| "L" ++ String.fromInt (level + 1) ++ " Cache" ] [ h3 [] [ text <| "L" ++ String.fromInt level ++ " Cache" ]
, cacheTable , cacheTable
] ]
viewCacheHierarchy : CacheHierarchy -> Html Msg viewCacheHierarchy : CacheHierarchy -> Html Msg
viewCacheHierarchy ch = viewCacheHierarchy ch =
let let
levels = div [] levels = div [ class "cache-levels" ]
<| List.indexedMap viewCache ch <| List.indexedMap viewCache ch
in in
levels div [ class "cache-hierarchy" ] <|
[ h2 [] [ text <| "Cache State" ]
, levels
]
viewAccessView : Model -> AccessView -> Html Msg viewAccessView : Model -> AccessView -> Html Msg
viewAccessView m av = viewAccessView m av =
let let
currentCache = Maybe.withDefault [] m.hierarchy currentCache = Maybe.withDefault [] m.hierarchy
in in
div [] div [ class "access-view" ]
[ h2 [] [ text "Access Simulation" ] [ h2 [] [ text "Access Simulation" ]
, buttonWrapper , buttonWrapper
[ primaryButton "Back" AccessViewBack [ button "Forward" AccessViewForward
, primaryButton "Forward" AccessViewForward , button "Back" AccessViewBack
] ]
, h3 [] [ text "Access event log" ]
, viewAccessLog av , viewAccessLog av
, h3 [] [ text "Current cache state" ]
, viewCacheHierarchy <| effectiveCacheHierarchy currentCache av , viewCacheHierarchy <| effectiveCacheHierarchy currentCache av
] ]
@ -177,10 +146,11 @@ viewAccessLog : AccessView -> Html Msg
viewAccessLog (aes, ap) = viewAccessLog (aes, ap) =
let let
resultSpan r = resultSpan r =
span [ classList [ ("badge", True), ("badge-success", r == Hit), ("badge-danger", r == Miss) ] ] case r of
[ text <| if r == Hit then "Hit" else "Miss" ] Hit -> span [ class "success" ] [ text "HIT" ]
Miss -> span [ class "failure" ] [ text "MISS" ]
downEvent n ae = div [ class "event" ] downEvent n ae = div [ class "event" ]
[ text <| "L" ++ String.fromInt (n + 1) ++ " " [ text <| "L" ++ String.fromInt (n + 1)
, resultSpan ae.result , resultSpan ae.result
] ]
upEvent n ae = div [ class "event" ] upEvent n ae = div [ class "event" ]
@ -193,48 +163,35 @@ viewAccessLog (aes, ap) =
Up n -> List.indexedMap downEvent aes ++ Up n -> List.indexedMap downEvent aes ++
(List.indexedMap upEvent <| List.drop n aes) (List.indexedMap upEvent <| List.drop n aes)
in in
div [] events div [ class "access-log" ]
[ h3 [] [ text "Simulation events" ]
, div [ class "access-log-events" ] events
]
viewAccessInput : Model -> Html Msg viewAccessInput : Model -> Html Msg
viewAccessInput m = viewAccessInput m =
let let
accessButton = maybeButton (String.toInt m.accessInput) "Access address" Access accessButton =
editHierarchyButton = button "Edit hierarchy" (UseHierarchy Nothing) case String.toInt m.accessInput of
Just i -> optionalButton True "Access address" (Access i)
Nothing -> optionalButton False "Access address" (Access -1)
in in
div [] div [ class "access-input" ]
[ h2 [] [ text "Run access simulation" ] [ 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 , labeledInput "Access address" m.accessInput ChangeAccessInput
, buttonWrapper [ accessButton, editHierarchyButton ] , accessButton
] ]
viewDescription : Html Msg viewError : Bool -> String -> Html Msg
viewDescription = viewError hide e = div [ classList [ ("hidden", hide), ("error", True) ] ] [ text e ]
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 : Model -> Html Msg
viewBase m = viewBase m =
let let
rawView = rawView = viewRawCacheModelHierarchy m.rawHierarchy
case m.hierarchy of
Nothing -> [ viewRawCacheModelHierarchy m.rawHierarchy ]
Just _ -> []
accessInputView =
case (m.hierarchy, m.accessView) of
(Just _, Nothing) -> [ viewAccessInput m ]
_ -> []
cacheView = cacheView =
case m.accessView of case m.accessView of
Nothing -> Nothing ->
@ -242,6 +199,6 @@ viewBase m =
<| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy <| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy
Just _ -> [] Just _ -> []
accessView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewAccessView m) <| m.accessView accessView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewAccessView m) <| m.accessView
accessInputView = [ viewAccessInput m ]
in in
div [ class "container" ] div [] <| [ rawView ] ++ cacheView ++ accessView ++ accessInputView
<| [ viewDescription] ++ rawView ++ accessInputView ++ accessView ++ cacheView

6
src/Main.elm
View File

@ -8,11 +8,15 @@ import CacheSim.View exposing (..)
import Browser exposing (Document, document) import Browser exposing (Document, document)
import Html exposing (text) import Html exposing (text)
testCacheModelHierarchy =
[ { blockSize = "128", setCount = "8", setSize = "1" }
]
init : Flags -> (Model, Cmd Msg) init : Flags -> (Model, Cmd Msg)
init f = init f =
let let
initialModel = initialModel =
{ rawHierarchy = [] { rawHierarchy = testCacheModelHierarchy
, hierarchy = Nothing , hierarchy = Nothing
, accessView = Nothing , accessView = Nothing
, accessInput = "" , accessInput = ""

129
static/scss/style.scss
View File

@ -1,3 +1,128 @@
.btn-group { @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
width: min-content; $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;
} }