Skip to content

Commit

Permalink
Merge branch 'dev' into 'main'
Browse files Browse the repository at this point in the history 
Merge dev in main

Closes #109, #108, and #107

* fix typo

* update version string

* update u-type format name

* Refactoring

* Added icon to help page + exit button to modals
Fixes #109

* Added some margin below help accordions

* Updated the ecall help page section
Fixes #108

* Page doesn't do weird horizontal scrolls on its own anymore
Fixed not by making the container not scrollable anymore (that didn't fix it) but by switching to a different scroll method for scrolling the memory table which just doesn't scroll horizontally
Fixes #107

* separate rows for memory access pseudo instr

See merge request es/lehre/rechnerarchitektur/architecture-simulator!73
  • Loading branch information
@mikuhn
mikuhn committed May 6, 2024
2 parents 5857861 + 8d4081b commit f8330c0
Show file tree
Hide file tree
Showing 11 changed files with 208 additions and 138 deletions.
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[project]
name = "architecture-simulator"
version = "1.3.1"
version = "1.3.2"
readme = "README.md"
requires-python = ">=3.10"
dependencies = ["pyparsing","fixedint","prompt-toolkit"]
Expand Down
59 changes: 59 additions & 0 deletions webgui/src/components/ArchsimModal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!-- Base component for bootstrap modals -->
<script setup>
const props = defineProps({
baseId: String,
iconName: String,
title: String,
showGithubLink: Boolean,
modalSize: String,
});
</script>
<template>
<div
class="modal fade"
:id="props.baseId"
tabindex="-1"
:aria-labelledby="`${props.baseId}-label`"
aria-hidden="true"
>
<div :class="`modal-dialog modal-${props.modalSize}`">
<div class="modal-content">
<div class="modal-header">
<h1
class="modal-title fs-2 text-light"
:id="`${props.baseId}-label`"
>
<i :class="`bi ${props.iconName}`"></i>
<span class="ms-2">{{ props.title }}</span>
</h1>
<button
class="ms-auto archsim-icon-button fs-2 text-light"
data-bs-dismiss="modal"
title="exit"
>
<i class="bi bi-x-circle"></i>
</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<a
v-if="props.showGithubLink"
href="https://github.com/ekut-es/architecture-simulator"
class="link-light"
target="_blank"
rel="noreferrer noopener"
>GitHub</a
>
<button
class="btn btn-secondary ms-auto"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</template>
62 changes: 16 additions & 46 deletions webgui/src/components/HelpModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,26 @@
<script setup>
import ToyHelp from "@/components/toy/ToyHelp.vue";
import RiscvHelp from "@/components/riscv/RiscvHelp.vue";
import ArchsimModal from "@/components/ArchsimModal.vue";
import { globalSettings } from "@/js/global_settings";
const modalProps = {
baseId: "help-modal",
iconName: "bi-question-circle-fill",
title: "Help",
showGithubLink: true,
modalSize: "xl",
};
</script>

<template>
<div
class="modal fade"
id="help-modal"
tabindex="-1"
aria-labelledby="help-modal-label"
aria-hidden="true"
>
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1
class="modal-title fs-2 text-light"
id="help-modal-label"
>
<i
class="bi bi-question-circle-fill"
width="35px"
height="35px"
></i>
<span> Help </span>
</h1>
</div>
<div id="help-modal-body" class="modal-body">
<!--Insert custom help pages here-->
<ToyHelp v-if="globalSettings.selectedIsa === 'toy'" />
<RiscvHelp v-if="globalSettings.selectedIsa === 'riscv'" />
<h1>Accessibility</h1>
<p>
To exit the editor without a mouse, you can press
ESC+Tab.
</p>
</div>
<div class="modal-footer">
<a
href="https://github.com/ekut-es/architecture-simulator"
class="me-auto link-light"
target="_blank"
rel="noreferrer noopener"
>GitHub</a
>
<button class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<ArchsimModal v-bind="modalProps">
<div id="help-modal-body" class="modal-body">
<!--Insert custom help pages here-->
<ToyHelp v-if="globalSettings.selectedIsa === 'toy'" />
<RiscvHelp v-if="globalSettings.selectedIsa === 'riscv'" />
<h1>Accessibility</h1>
<p>To exit the editor without a mouse, you can press ESC+Tab.</p>
</div>
</div>
</ArchsimModal>
</template>
73 changes: 24 additions & 49 deletions webgui/src/components/SettingsModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import ToySettingsPage from "./toy/ToySettingsPage.vue";
import RiscvSettingsPage from "./riscv/RiscvSettingsPage.vue";
import RadioSettingsRow from "./RadioSettingsRow.vue";
import ArchsimModal from "./ArchsimModal.vue";

import { globalSettings } from "@/js/global_settings";
import { ref, watch } from "vue";
Expand All @@ -13,57 +14,31 @@ const selectedIsa = ref("");
watch(selectedIsa, (selection) => {
globalSettings.setSelectedIsa(selection);
});
const modalProps = {
baseId: "settings-modal",
iconName: "bi-gear-fill",
title: "Settings",
showGithubLink: false,
modalSize: "lg",
};
</script>

<template>
<div
class="modal fade"
id="settings-modal"
tabindex="-1"
aria-labelledby="settings-modal-label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1
class="modal-title fs-2 text-light"
id="settingsModalLabel"
>
Settings
</h1>
</div>
<div class="modal-body">
<div
id="isa-selector-settings-container"
class="border-bottom mb-2"
>
<RadioSettingsRow
v-model="selectedIsa"
:default-selection="globalSettings.selectedIsa"
:option-names="['RISC-V', 'Toy']"
:option-values="['riscv', 'toy']"
:base-id="'isa-selector'"
:display-name="'ISA'"
>
</RadioSettingsRow>
</div>
<div id="isa-specific-settings-container">
<!--Insert custom settings pages here-->
<ToySettingsPage
v-if="globalSettings.selectedIsa === 'toy'"
/>
<RiscvSettingsPage
v-if="globalSettings.selectedIsa === 'riscv'"
/>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
<ArchsimModal v-bind="modalProps">
<div id="isa-selector-settings-container" class="border-bottom mb-2">
<RadioSettingsRow
v-model="selectedIsa"
:default-selection="globalSettings.selectedIsa"
:option-names="['RISC-V', 'Toy']"
:option-values="['riscv', 'toy']"
:base-id="'isa-selector'"
:display-name="'ISA'"
/>
</div>
</div>
<div id="isa-specific-settings-container">
<!--Insert custom settings pages here-->
<ToySettingsPage v-if="globalSettings.selectedIsa === 'toy'" />
<RiscvSettingsPage v-if="globalSettings.selectedIsa === 'riscv'" />
</div>
</ArchsimModal>
</template>
16 changes: 9 additions & 7 deletions webgui/src/components/riscv/RiscvHelp.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import riscv_instructions from "@/data/riscv_instructions.json";
import RiscvHelpTable from "./RiscvHelpTable.vue";
</script>
<template>
<div class="container-fluid">
<div>
<h1>RISC-V</h1>
<h2 id="instructions">Instructions</h2>
<p>
Expand Down Expand Up @@ -404,12 +404,14 @@ addi x3, x3, 1 # This line is never reached</pre
</p>

<p>
Note that our visualization of the pipeline during
an ECALL is not fully correct. The pipeline might
get flushed unnecessarily and we also dont halt the
pipeline until the ECALL has finished - instead, the
entire ecall is being executed in a single cycle (in
the execute stage).
ECALLs will be processed without any additional
delay. If you are using the five stage pipeline,
this will happen in the execute stage. The pipeline
will always get stalled until there are no more
instructions in later stages to prevent data
hazards. Note that in the real world, the
environment might need more than one cycle to
process an ECALL.
</p>

<div class="table-responsive">
Expand Down
12 changes: 9 additions & 3 deletions webgui/src/components/riscv/RiscvMemoryTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ watchEffect(() => {
// update the current instruction row if the matching indicator is in the list
// else just keep the old row
if (row.stage === currentInstructionIndicator) {
currentInstructionRow.value = index;
currentInstructionRow.value = index + 1; // +1 because of the head row
}
tableEntries.push(row);
}
Expand All @@ -73,9 +73,15 @@ watch(
}
const rows = table.value.rows;
if (rows.length > rowIndex) {
rows[rowIndex].scrollIntoView({
const scrollAmount =
rows[rowIndex].offsetTop +
rows[rowIndex].offsetHeight / 2 -
table.value.parentNode.offsetHeight / 2;
table.value.parentNode.scroll({
// scrollIntoView also scrolls horizontally, so I dont use it here
top: scrollAmount,
left: 0,
behavior: "smooth",
block: "center",
});
}
}
Expand Down
2 changes: 1 addition & 1 deletion webgui/src/components/toy/ToyHelp.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- The TOY help page -->
<template>
<div class="container-fluid">
<div>
<h1>TOY</h1>
<h2>Instructions</h2>
<div class="table-responsive">
Expand Down
12 changes: 9 additions & 3 deletions webgui/src/components/toy/ToyMemoryTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ watchEffect(() => {
// update the current instruction row if a current instruction can be found
// else just keep the old row
if (row.cycle !== "") {
currentInstructionRow.value = index;
currentInstructionRow.value = index + 1; // +1 because of the head row
}
result.push(row);
}
Expand All @@ -51,9 +51,15 @@ watch(
}
const rows = table.value.rows;
if (rows.length > rowIndex) {
rows[rowIndex].scrollIntoView({
const scrollAmount =
rows[rowIndex].offsetTop +
rows[rowIndex].offsetHeight / 2 -
table.value.parentNode.offsetHeight / 2;
table.value.parentNode.scroll({
// scrollIntoView also scrolls horizontally, so I dont use it here
top: scrollAmount,
left: 0,
behavior: "smooth",
block: "center",
});
}
}
Expand Down
4 changes: 4 additions & 0 deletions webgui/src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ body {
overflow: hidden;
}

.accordion {
margin: 0 0 1rem 0;
}

#app {
height: 100%;
display: flex;
Expand Down
Loading

0 comments on commit f8330c0

Please sign in to comment.