diff --git a/src/agent.rs b/src/agent.rs
index a93658f6a..8d1a1eace 100644
--- a/src/agent.rs
+++ b/src/agent.rs
@@ -60,10 +60,14 @@ pub async fn emulation_core_agent(scope: ReactorScope<Command, DatapathUpdate>)
                     DatapathUpdate::MIPS(MipsStateUpdate::UpdateMemory(datapath.memory.clone()));
                 let stage_update =
                     DatapathUpdate::MIPS(MipsStateUpdate::UpdateStage(datapath.current_stage));
+                let coprocessor_update = DatapathUpdate::MIPS(MipsStateUpdate::UpdateCoprocessor(
+                    datapath.coprocessor.clone(),
+                ));
                 state.scope.send(state_update).await.unwrap();
                 state.scope.send(register_update).await.unwrap();
                 state.scope.send(memory_update).await.unwrap();
                 state.scope.send(stage_update).await.unwrap();
+                state.scope.send(coprocessor_update).await.unwrap();
             }
         }
     }
diff --git a/src/agent/datapath_reducer.rs b/src/agent/datapath_reducer.rs
index 63bfc7902..c14bdad90 100644
--- a/src/agent/datapath_reducer.rs
+++ b/src/agent/datapath_reducer.rs
@@ -1,6 +1,7 @@
 use crate::agent::messages::MipsStateUpdate;
 use crate::emulation_core::architectures::AvailableDatapaths::MIPS;
 use crate::emulation_core::architectures::{AvailableDatapaths, DatapathUpdate};
+use crate::emulation_core::mips::coprocessor::MipsFpCoprocessor;
 use crate::emulation_core::mips::datapath::{DatapathState, Stage};
 use crate::emulation_core::mips::memory::Memory;
 use crate::emulation_core::mips::registers::GpRegisters;
@@ -19,6 +20,7 @@ pub struct MipsCoreState {
     pub registers: GpRegisters,
     pub memory: Memory,
     pub current_stage: Stage,
+    pub coprocessor: MipsFpCoprocessor,
 }
 
 impl Default for DatapathReducer {
@@ -43,24 +45,35 @@ impl Reducible for DatapathReducer {
                         registers: self.mips.registers,
                         memory: self.mips.memory.clone(),
                         current_stage: self.mips.current_stage,
+                        coprocessor: self.mips.coprocessor.clone(),
                     },
                     MipsStateUpdate::UpdateRegisters(registers) => MipsCoreState {
                         state: self.mips.state.clone(),
                         registers,
                         memory: self.mips.memory.clone(),
                         current_stage: self.mips.current_stage,
+                        coprocessor: self.mips.coprocessor.clone(),
                     },
                     MipsStateUpdate::UpdateMemory(memory) => MipsCoreState {
                         state: self.mips.state.clone(),
                         registers: self.mips.registers,
                         memory,
                         current_stage: self.mips.current_stage,
+                        coprocessor: self.mips.coprocessor.clone(),
                     },
                     MipsStateUpdate::UpdateStage(stage) => MipsCoreState {
                         state: self.mips.state.clone(),
                         registers: self.mips.registers,
                         memory: self.mips.memory.clone(),
                         current_stage: stage,
+                        coprocessor: self.mips.coprocessor.clone(),
+                    },
+                    MipsStateUpdate::UpdateCoprocessor(coprocessor) => MipsCoreState {
+                        state: self.mips.state.clone(),
+                        registers: self.mips.registers,
+                        memory: self.mips.memory.clone(),
+                        current_stage: self.mips.current_stage,
+                        coprocessor,
                     },
                 },
             },
diff --git a/src/agent/messages.rs b/src/agent/messages.rs
index 664c2deaa..8de055b0a 100644
--- a/src/agent/messages.rs
+++ b/src/agent/messages.rs
@@ -1,3 +1,4 @@
+use crate::emulation_core::mips::coprocessor::MipsFpCoprocessor;
 use crate::emulation_core::mips::datapath::DatapathState;
 use crate::emulation_core::mips::memory::Memory;
 use crate::emulation_core::mips::registers::GpRegisters;
@@ -26,4 +27,5 @@ pub enum MipsStateUpdate {
     UpdateRegisters(GpRegisters),
     UpdateMemory(Memory),
     UpdateStage(Stage),
+    UpdateCoprocessor(MipsFpCoprocessor),
 }
diff --git a/src/bin/main.rs b/src/bin/main.rs
index 011ea91d2..5f505212c 100644
--- a/src/bin/main.rs
+++ b/src/bin/main.rs
@@ -522,7 +522,7 @@ fn app(props: &AppProps) -> Html {
                     </div>
 
                     // Console
-                    <Footer parsermsg={(*parser_text_output).clone()} datapath={(*datapath.borrow()).clone()} memory_text_model={memory_text_model} memory_curr_instr={memory_curr_instr.clone()} active_tab={console_active_tab.clone()} communicator={props.communicator} show_input={show_input.clone()} command={command.clone()}/>
+                    <Footer parsermsg={(*parser_text_output).clone()} datapath_state={datapath_state.clone()} memory_text_model={memory_text_model} memory_curr_instr={memory_curr_instr.clone()} active_tab={console_active_tab.clone()} communicator={props.communicator} show_input={show_input.clone()} command={command.clone()}/>
                 </div>
 
                 // Right column
diff --git a/src/emulation_core/mips/control_signals.rs b/src/emulation_core/mips/control_signals.rs
index 5ff0ad324..e7f11de77 100644
--- a/src/emulation_core/mips/control_signals.rs
+++ b/src/emulation_core/mips/control_signals.rs
@@ -279,8 +279,9 @@ pub enum RegWrite {
 
 pub mod floating_point {
     use super::super::constants::*;
+    use serde::{Deserialize, Serialize};
 
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub struct FpuControlSignals {
         pub cc: Cc,
         pub cc_write: CcWrite,
@@ -300,7 +301,7 @@ pub mod floating_point {
     ///
     /// For the sake of this project, it will usually be assumed that this will
     /// be 0, however the functionality is available to be extended.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum Cc {
         /// Use condition code register 0. Default in most operations. Can be
         /// additionally used in the case where the condition code register is
@@ -310,7 +311,7 @@ pub mod floating_point {
     }
 
     /// Determines if the condition code register file should be written to.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum CcWrite {
         #[default]
         NoWrite = 0,
@@ -321,7 +322,7 @@ pub mod floating_point {
     ///
     /// This is a special intermediary register that facilitates passing data between
     /// the main processing unit and the floating-point unit.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum DataSrc {
         /// Use data from the main processing unit. Specifically, the data from register
         /// `rt` from a given instruction. This value can additionally be used in the cases
@@ -342,7 +343,7 @@ pub mod floating_point {
     /// For the latter two functions, it is imperative to unset the [`RegWrite`](super::RegWrite) and
     /// [`FpuRegWrite`] control signals in cases where registers should not be modified
     /// with unintended data.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum DataWrite {
         /// - Do not write to the data register.
         /// - Source data to write to the main processing unit register file from the main
@@ -373,7 +374,7 @@ pub mod floating_point {
     ///
     /// *Implementation note:* The bits set for the comparator are intended to match
     /// the bits used in the `cond` field of a `c.cond.fmt` instruction.
-    #[derive(Clone, Debug, Default, PartialEq)]
+    #[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize)]
     pub enum FpuAluOp {
         #[default]
         /// `_0000` (0):
@@ -437,7 +438,7 @@ pub mod floating_point {
     ///
     /// This directly overrides any branch decisions decided by the main processing unit.
     /// The [`Branch`](super::Branch) control signal should not be set in addition to this signal.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum FpuBranch {
         /// Do not consider branching.
         #[default]
@@ -451,7 +452,7 @@ pub mod floating_point {
     /// register's new data will be.
     ///
     /// This decision, if set, overrides the decision from the [`DataWrite`] control signal.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum FpuMemToReg {
         /// Do not use data from memory. Use the result of the [`DataWrite`] control signal.
         #[default]
@@ -463,7 +464,7 @@ pub mod floating_point {
 
     /// Determines, given that [`FpuRegWrite`] is set, which destination register to write
     /// to, which largely depends on the instruction format.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum FpuRegDst {
         /// Use register `ft`.
         Reg1 = 0,
@@ -480,7 +481,7 @@ pub mod floating_point {
     ///
     /// While all buses carrying information are 64-bits wide, some bits of the bus may be
     /// ignored in the case of this control signal.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum FpuRegWidth {
         /// Use words (32 bits). Equivalent to a single-precision floating-point value.
         Word = 0,
@@ -503,7 +504,7 @@ pub mod floating_point {
     }
 
     /// Determines if the floating-point register file should be written to.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum FpuRegWrite {
         /// Do not write to the floating-point register file.
         #[default]
@@ -517,7 +518,7 @@ pub mod floating_point {
     /// to follow through with a branch.
     ///
     /// This signal is what is sent to the main processor.
-    #[derive(Clone, Default, PartialEq)]
+    #[derive(Clone, Default, PartialEq, Serialize, Deserialize, Debug)]
     pub enum FpuTakeBranch {
         #[default]
         NoBranch = 0,
diff --git a/src/emulation_core/mips/coprocessor.rs b/src/emulation_core/mips/coprocessor.rs
index c0c40fe85..2b8b29a2a 100644
--- a/src/emulation_core/mips/coprocessor.rs
+++ b/src/emulation_core/mips/coprocessor.rs
@@ -3,12 +3,13 @@
 use super::constants::*;
 use super::control_signals::floating_point::*;
 use super::instruction::Instruction;
+use serde::{Deserialize, Serialize};
 
 /// An implementation of a floating-point coprocessor for the MIPS64 ISA.
 ///
 /// Different from the main processor, much of the functionality of the coprocessor
 /// is controlled remotely using its available API calls.
-#[derive(Clone, Default, PartialEq)]
+#[derive(Clone, Default, PartialEq, Serialize, Debug, Deserialize)]
 pub struct MipsFpCoprocessor {
     instruction: Instruction,
     pub signals: FpuControlSignals,
@@ -20,7 +21,7 @@ pub struct MipsFpCoprocessor {
     pub data: u64,
 }
 
-#[derive(Clone, Default, PartialEq)]
+#[derive(Clone, Default, PartialEq, Debug, Serialize, Deserialize)]
 pub struct FpuState {
     pub instruction: u32,
     pub op: u32,
diff --git a/src/emulation_core/mips/instruction.rs b/src/emulation_core/mips/instruction.rs
index 932487edf..d321f57b7 100644
--- a/src/emulation_core/mips/instruction.rs
+++ b/src/emulation_core/mips/instruction.rs
@@ -1,6 +1,7 @@
 //! Abstract representation of an instruction.
 
 use crate::parser::parser_structs_and_enums::GP_REGISTERS;
+use serde::{Deserialize, Serialize};
 
 use super::constants::*;
 
@@ -24,7 +25,7 @@ use super::constants::*;
 ///   determining the type of instruction executed (in `mul`, `dmul`, `dmulu`, `div`, `ddiv`,
 ///   `ddivu`), or be used as a "hint" field for certain instructions (of note are `jr` and `jalr`).
 /// - function: Secondary field for determining the type of instruction executed.
-#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[derive(Clone, Copy, Debug, Default, PartialEq, Serialize, Deserialize)]
 pub struct RType {
     pub op: u8,
     pub rs: u8,
@@ -34,7 +35,7 @@ pub struct RType {
     pub funct: u8,
 }
 
-#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[derive(Clone, Copy, Debug, Default, PartialEq, Serialize, Deserialize)]
 pub struct IType {
     pub op: u8,
     pub rs: u8,
@@ -42,7 +43,7 @@ pub struct IType {
     pub immediate: u16,
 }
 
-#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[derive(Clone, Copy, Debug, Default, PartialEq, Serialize, Deserialize)]
 pub struct JType {
     pub op: u8,
     pub addr: u32,
@@ -62,14 +63,14 @@ pub struct JType {
 /// - opcode: SPECIAL (`000000`)
 /// - code: Available for use as software parameters.
 /// - funct: SYSCALL (`001100`)
-#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[derive(Clone, Copy, Debug, Default, PartialEq, Serialize, Deserialize)]
 pub struct SyscallType {
     pub op: u8,
     pub code: u32,
     pub funct: u8,
 }
 
-#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[derive(Clone, Copy, Debug, Default, PartialEq, Serialize, Deserialize)]
 pub struct FpuRType {
     pub op: u8,
     pub fmt: u8,
@@ -79,7 +80,7 @@ pub struct FpuRType {
     pub function: u8,
 }
 
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
 pub struct FpuIType {
     pub op: u8,
     pub base: u8,
@@ -105,7 +106,7 @@ pub struct FpuIType {
 /// - sub: Operation subcode field for COP1 register immediate-mode instructions.
 /// - rt: CPU register - can be either source or destination.
 /// - fs: FPU register - can be either source or destination.
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
 pub struct FpuRegImmType {
     pub op: u8,
     pub sub: u8,
@@ -113,7 +114,7 @@ pub struct FpuRegImmType {
     pub fs: u8,
 }
 
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
 pub struct FpuCompareType {
     pub op: u8,
     pub fmt: u8,
@@ -142,7 +143,7 @@ pub struct FpuCompareType {
 /// - nd: Nullify delay. If set, the branch is Likely, and the delay slot instruction is not executed. (Not necessary for this project.)
 /// - tf: True/False. The type of condition for a comparison.
 /// - offset: Signed offset field used in address calculations.
-#[derive(Clone, Copy, Debug, PartialEq)]
+#[derive(Clone, Copy, Debug, PartialEq, Serialize, Deserialize)]
 pub struct FpuBranchType {
     pub op: u8,
     pub bcc1: u8,
@@ -152,7 +153,7 @@ pub struct FpuBranchType {
     pub offset: u16,
 }
 
-#[derive(Clone, Debug, PartialEq)]
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
 pub enum Instruction {
     RType(RType),
     IType(IType),
diff --git a/src/emulation_core/mips/line_info.rs b/src/emulation_core/mips/line_info.rs
index add7c20ec..e8c18dc08 100644
--- a/src/emulation_core/mips/line_info.rs
+++ b/src/emulation_core/mips/line_info.rs
@@ -1,6 +1,9 @@
 //! Module for mapping lines in the visual datapath to information
 //! and variables in the coded datapath.
 
+use crate::agent::datapath_reducer::DatapathReducer;
+use yew::UseReducerHandle;
+
 use super::super::datapath::VisualDatapath;
 use super::datapath::MipsDatapath;
 
@@ -330,3 +333,317 @@ impl VisualDatapath for MipsDatapath {
         }
     }
 }
+
+pub fn visual_line_to_data(
+    variable: &str,
+    datapath_state: &UseReducerHandle<DatapathReducer>,
+) -> LineInformation {
+    match variable {
+        "alu_input2" => LineInformation {
+            title: String::from("ALU Input 2"),
+            description: String::from("The second input to the ALU. This is determined by the ALUSrc control signal to select between register data, a sign-extended and left-shifted immediate value, or a zero-extended immediate value."),
+            value: datapath_state.mips.state.alu_input2,
+            bits: 64,
+        },
+        "alu_result" => LineInformation {
+            title: String::from("ALU Result"),
+            description: String::from("The result of the calculation performed by the ALU. This is used either as an address to access memory or as a value that is saved into a register."),
+            value: datapath_state.mips.state.alu_result,
+            bits: 64,
+        },
+        "data_result" => LineInformation {
+            title: String::from("Writeback Data"),
+            description: String::from("After finishing processing the instruction, this will either be the ALU result, data from memory, or PC + 4, based on the MemToReg control signal. This data is saved into registers."),
+            value: datapath_state.mips.state.data_result,
+            bits: 64,
+        },
+        "fpu_alu_result" => LineInformation {
+            title: String::from("Floating-Point ALU Result"),
+            description: String::from("The result of the calculation performed by the floating-point ALU. This is used as an option to be written to a floating-point register, based on the DataWrite and FpuMemToReg control signals."),
+            value: datapath_state.mips.coprocessor.state.alu_result,
+            bits: 64,
+        },
+        "fpu_branch_decision" => LineInformation {
+            title: String::from("FPU Branch Decision"),
+            description: String::from("Based on the true/false branch flag, determines whether to branch. (The FpuBranch control signal must also be set.)"),
+            value: datapath_state.mips.coprocessor.state.condition_code_mux as u64,
+            bits: 1,
+        },
+        "fpu_branch_flag" => LineInformation {
+            title: String::from("Instruction [16] (True/False Branch Flag)"),
+            description: String::from("The true/false branch flag of branching datapath_state.mips.coprocessor instructions. This flag specifies whether a floating-point branch instruction is BC1T or BC1F."),
+            value: datapath_state.mips.coprocessor.state.branch_flag as u64,
+            bits: 1,
+        },
+        "fpu_comparator_result" => LineInformation {
+            title: String::from("Floating-Point Comparator Result"),
+            description: String::from("The result of the comparison of two floating-point values. This is routed to the \"Condition Code\" (cc) register, and will be written there if the CcWrite control signal is set."),
+            value: datapath_state.mips.coprocessor.state.comparator_result,
+            bits: 64,
+        },
+        "fpu_condition_code" => LineInformation {
+            title: String::from("Condition Code Value"),
+            description: String::from("Data retrieved from the \"Condition Code\" (cc) register. This specifies whether a previous conditional instruction was true or false."),
+            value: datapath_state.mips.coprocessor.state.condition_code_bit as u64,
+            bits: 1,
+        },
+        "fpu_condition_code_inverted" => LineInformation {
+            title: String::from("Condition Code Value (Inverted)"),
+            description: String::from("Inverted form of the condition code register value."),
+            value: datapath_state.mips.coprocessor.state.condition_code_bit_inverted as u64,
+            bits: 1,
+        },
+        "fpu_data" => LineInformation {
+            title: String::from("Floating-Point Data Register Value"),
+            description: String::from("Data retrieved from the \"Data\" register. This register acts as a means to communicate data between the main processor and floating-point datapath_state.mips.coprocessor in MTC1 and MFC1 instructions."),
+            value: datapath_state.mips.coprocessor.state.fmt as u64,
+            bits: 64,
+        },
+        "fpu_data_writeback" => LineInformation {
+            title: String::from("Floating-Point Data Writeback"),
+            description: String::from("The value from the floating-point unit's \"Data\" register. Depending on the FpuRegWidth control signal, this will be 64-bit data or sign-extended 32-bit data."),
+            value: datapath_state.mips.coprocessor.state.data_writeback,
+            bits: 64,
+        },
+        "fpu_destination" => LineInformation {
+            title: String::from("Floating-Point Write Register"),
+            description: String::from("The register that will be written to, assuming FpuRegWrite is set. Depending on the FpuRegDst control signal, this will consist of the fs, ft, or fd register."),
+            value: datapath_state.mips.coprocessor.state.destination as u64,
+            bits: 5,
+        },
+        "fpu_fd" => LineInformation {
+            title: String::from("Instruction [10-6] (fd)"),
+            description: String::from("The fd field. Depending on the FpuRegDst control signal, this will be the register written to in a floating-point operation. This register is used as the destination for most floating-point arithmetic instructions."),
+            value: datapath_state.mips.coprocessor.state.fd as u64,
+            bits: 5,
+        },
+        "fpu_fmt" => LineInformation {
+            title: String::from("Instruction [25-21] (fmt)"),
+            description: String::from("The fmt field. This is used to distinguish between single-precision and double-precision floating-point instructions."),
+            value: datapath_state.mips.coprocessor.state.fmt as u64,
+            bits: 5,
+        },
+        "fpu_fp_register_data_from_main_processor" => LineInformation {
+            title: String::from("Writeback Data (To Floating-Point Coprocessor)"),
+            description: String::from("This data is written to a floating-point register, given FpuMemToReg is set. This line allows data to load from memory to a floating-point register, specifically in the case of the LWC1 instruction."),
+            value: datapath_state.mips.coprocessor.state.fp_register_data_from_main_processor,
+            bits: 64,
+        },
+        "fpu_fp_register_to_memory" => LineInformation {
+            title: String::from("Memory Write Data (from FPU)"),
+            description: String::from("If the MemWriteSrc control signal is set, this data will be written to memory. This is used for the SWC1 instruction."),
+            value: datapath_state.mips.coprocessor.state.fp_register_to_memory,
+            bits: 64,
+        },
+        "fpu_fs" => LineInformation {
+            title: String::from("Instruction [15-11] (fs)"),
+            description: String::from("The fs field. Contains the first register to be read for a floating-point instruction."),
+            value: datapath_state.mips.coprocessor.state.fs as u64,
+            bits: 5,
+        },
+        "fpu_ft" => LineInformation {
+            title: String::from("Instruction [20-16] (ft)"),
+            description: String::from("The ft field. Contains the second register to be read for a floating-point instruction."),
+            value: datapath_state.mips.coprocessor.state.ft as u64,
+            bits: 5,
+        },
+        "fpu_new_data" => LineInformation {
+            title: String::from("New Floating-Point Data Register Value"),
+            description: String::from("Data sent to the \"Data\" register. Depending on the DataSrc control signal, this will either be data from the main processor or the floating-point datapath_state.mips.coprocessor. This register acts as a means to communicate data between the main processor and floating-point datapath_state.mips.coprocessor in MTC1 and MFC1 instructions."),
+            value: datapath_state.mips.coprocessor.state.fmt as u64,
+            bits: 64,
+        },
+        "fpu_read_data_1" => LineInformation {
+            title: String::from("FPU Read Data 1"),
+            description: String::from("Data retrieved from the register specified by the fs instruction field. This is used as the first inputs to the floating-point ALU and comparator. This can additionally be written to the \"Data\" register, based on the DataSrc and DataWrite control signals."),
+            value: datapath_state.mips.coprocessor.state.read_data_1,
+            bits: 64,
+        },
+        "fpu_read_data_2" => LineInformation {
+            title: String::from("FPU Read Data 2"),
+            description: String::from("Data retrieved from the register specified by the ft instruction field. This is used as the second inputs to the floating-point ALU and comparator. This can additionally be used as data to be written to memory, based on the MemWriteSrc control signal."),
+            value: datapath_state.mips.coprocessor.state.read_data_2,
+            bits: 64,
+        },
+        "fpu_register_write_data" => LineInformation {
+            title: String::from("FPU Register Write Data"),
+            description: String::from("Data that will be written to a floating-point register, given that FpuRegWrite is set."),
+            value: datapath_state.mips.coprocessor.state.register_write_data,
+            bits: 64,
+        },
+        "fpu_register_write_mux_to_mux" => LineInformation {
+            title: String::from("FPU Register Write Data (When FpuMemToReg is Unset)"),
+            description: String::from("Based on the DataWrite control signal, this will either be the result of the floating-point ALU or the contents of the \"Data\" register. (The \"Data\" register is used for transferring data between the processor and floating-point datapath_state.mips.coprocessor.)"),
+            value: datapath_state.mips.coprocessor.state.register_write_mux_to_mux,
+            bits: 64,
+        },
+        "fpu_sign_extend_data" => LineInformation {
+            title: String::from("Floating-Point Data Register Value (Sign-Extended)"),
+            description: String::from("In the case where FpuRegWidth indicates a 32-bit width, this is the bottom 32 bits of the value from the \"Data\" register, then sign-extended to 64 bits."),
+            value: datapath_state.mips.coprocessor.state.sign_extend_data,
+            bits: 64,
+        },
+        "funct" => LineInformation {
+            title: String::from("Instruction [5-0] (funct)"),
+            description: String::from("The funct field. Contains the type of operation to execute for R-type instructions."),
+            value: datapath_state.mips.state.funct as u64,
+            bits: 6,
+        },
+        "imm" => LineInformation {
+            title: String::from("Instruction [15-0] (immediate)"),
+            description: String::from("The immediate field. Contains the 16-bit constant value used for I-type instructions."),
+            value: datapath_state.mips.state.imm as u64,
+            bits: 16,
+        },
+        "instruction" => LineInformation {
+            title: String::from("Instruction"),
+            description: String::from("The currently-loaded instruction. This is broken down into different fields, where each field serves a different purpose in identifying what the instruction does."),
+            value: datapath_state.mips.state.instruction as u64,
+            bits: 32,
+        },
+        "jump_address" => LineInformation {
+            title: String::from("Jump Address"),
+            description: String::from("The concatenation of the upper 36 bits of PC + 4 with the lower 26 bits of the instruction, shifted left by 2. This is used as the new PC value for J-type instructions."),
+            value: datapath_state.mips.state.jump_address,
+            bits: 64,
+        },
+        "lower_26" => LineInformation {
+            title: String::from("Instruction [25-0]"),
+            description: String::from("The lower 26 bits of instruction. This is used as part of the new PC value for J-type instructions."),
+            value: datapath_state.mips.state.lower_26 as u64,
+            bits: 26,
+        },
+        "lower_26_shifted_left_by_2" => LineInformation {
+            title: String::from("Instruction [25-0] << 2"),
+            description: String::from("The lower 26 bits of instruction, shifted left by 2. This is used as part of the new PC value for J-type instructions."),
+            value: datapath_state.mips.state.lower_26_shifted_left_by_2 as u64,
+            bits: 28,
+        },
+        "mem_mux1_to_mem_mux2" => LineInformation {
+            title: String::from("Relative PC Address"),
+            description: String::from("Based on the control signals for branching and jumping, this address may be the next PC value. This is used for general non-branching instructions or branch-type instructions."),
+            value: datapath_state.mips.state.mem_mux1_to_mem_mux2,
+            bits: 64,
+        },
+        "memory_data" => LineInformation {
+            title: String::from("Memory Data"),
+            description: String::from("The data retrieved from memory, given that the MemRead control signal is set. This may be 32 bits or 64 bits, depending on the RegWidth control signal."),
+            value: datapath_state.mips.state.memory_data,
+            bits: 64,
+        },
+        "new_pc" => LineInformation {
+            title: String::from("New Program Counter"),
+            description: String::from("The address of the next instruction to execute. In other words, the next value of the program counter (PC) register."),
+            value: datapath_state.mips.state.new_pc,
+            bits: 64,
+        },
+        "pc" => LineInformation {
+            title: String::from("Program Counter"),
+            description: String::from("The address of the currently-executing instruction."),
+            value: datapath_state.mips.registers.pc,
+            bits: 64,
+        },
+        "pc_plus_4" => LineInformation {
+            title: String::from("PC + 4"),
+            description: String::from("The address of the currently-executing instruction, plus 4. By default, this will become the next value of the PC register. However, a different address may be used in the case of a branch or jump instruction."),
+            value: datapath_state.mips.state.pc_plus_4,
+            bits: 64,
+        },
+        "pc_plus_4_upper" => LineInformation {
+            title: String::from("PC + 4 [63-28]"),
+            description: String::from("The upper 36 bits of PC + 4. This is to be concatenated with the lower 26 bits of the instruction to calculate a jump address."),
+            value: datapath_state.mips.state.pc_plus_4 & 0xffff_ffff_f000_0000 >> 28,
+            bits: 36,
+        },
+        "ra_id" => LineInformation {
+            title: String::from("Return Address Register Index"),
+            description: String::from("The value 31. This represents the thirty-second register, the return address register ($ra)."),
+            value: 31,
+            bits: 5,
+        },
+        "rd" => LineInformation {
+            title: String::from("Instruction [15-11] (rd)"),
+            description: String::from("The rd field. Depending on the RegDst control signal, this will be the register written to for an instruction. This register is used as the destination for most R-type instructions."),
+            value: datapath_state.mips.state.rd as u64,
+            bits: 5,
+        },
+        "read_data_1" => LineInformation {
+            title: String::from("Read Data 1"),
+            description: String::from("Data retrieved from the register specified by the rs instruction field. Based on the instruction, this may be used as the first input to the ALU, or the next value of the PC register."),
+            value: datapath_state.mips.state.read_data_1,
+            bits: 64,
+        },
+        "read_data_2" => LineInformation {
+            title: String::from("Read Data 2"),
+            description: String::from("Data retrieved from the register specified by the rt instruction field. Based on the instruction, this may be used as the second input to the ALU, data written to memory, or data transferred to the floating-point coprocessor."),
+            value: datapath_state.mips.state.read_data_2,
+            bits: 64,
+        },
+        "register_write_data" => LineInformation {
+            title: String::from("Register Write Data"),
+            description: String::from("Data that will be written to a general-purpose register, given that RegWrite is set."),
+            value: datapath_state.mips.state.register_write_data,
+            bits: 64,
+        },
+        "relative_pc_branch" => LineInformation {
+            title: String::from("Relative PC Branch Address"),
+            description: String::from("The relative address used in branch instructions. This is the sum of PC + 4 and the sign-extended immediate value, shifted left by 2."),
+            value: datapath_state.mips.state.relative_pc_branch,
+            bits: 64,
+        },
+        "rs" => LineInformation {
+            title: String::from("Instruction [25-21] (rs)"),
+            description: String::from("The rs field. Contains the first register to be read for an instruction."),
+            value: datapath_state.mips.state.rs as u64,
+            bits: 5,
+        },
+        "rt" => LineInformation {
+            title: String::from("Instruction [20-16] (rt)"),
+            description: String::from("The rt field. Contains the second register to be read for an instruction."),
+            value: datapath_state.mips.state.rt as u64,
+            bits: 5,
+        },
+        "shamt" => LineInformation {
+            title: String::from("Instruction [10-6] (shamt)"),
+            description: String::from("The shamt (\"shift amount\") field. Specifies the number of bits to shift for those instructions that perform bit-shifting."),
+            value: datapath_state.mips.state.shamt as u64,
+            bits: 5,
+        },
+        "sign_extend" => LineInformation {
+            title: String::from("Sign-Extended Immediate"),
+            description: String::from("The immediate field, sign-extended to a 64-bit value."),
+            value: datapath_state.mips.state.sign_extend,
+            bits: 64,
+        },
+        "sign_extend_shift_left_by_2" => LineInformation {
+            title: String::from("Sign-Extended Immediate << 2"),
+            description: String::from("The immediate field, sign-extended to a 64-bit value, then shifted left by 2."),
+            value: datapath_state.mips.state.sign_extend_shift_left_by_2,
+            bits: 64,
+        },
+        "write_data" => LineInformation {
+            title: String::from("Memory Write Data"),
+            description: String::from("Given that the MemWrite control signal is set, this data will be written to memory."),
+            value: datapath_state.mips.state.write_data,
+            bits: 64,
+        },
+        "write_register" => LineInformation {
+            title: String::from("Write Register"),
+            description: String::from("The register that will be written to, assuming RegWrite is set. Depending on the RegDst control signal, this will consist of the rs, rt, or rd register, or 31 (indicating the $ra register)."),
+            value: datapath_state.mips.state.write_register_destination as u64,
+            bits: 5,
+        },
+        "zero_extended_immediate" => LineInformation {
+            title: String::from("Zero-Extended Immediate"),
+            description: String::from("The immediate field, zero-extended to a 64-bit value."),
+            value: datapath_state.mips.state.imm as u64,
+            bits: 64,
+        },
+        _ => LineInformation {
+            title: String::from("[Title]"),
+            description: String::from("[Description]"),
+            value: 0,
+            bits: 0,
+        },
+    }
+}
diff --git a/src/emulation_core/riscv/line_info.rs b/src/emulation_core/riscv/line_info.rs
index d17a5e319..fa606e590 100644
--- a/src/emulation_core/riscv/line_info.rs
+++ b/src/emulation_core/riscv/line_info.rs
@@ -331,4 +331,4 @@ impl VisualDatapath for RiscDatapath {
             },
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/parser/parser_assembler_main.rs b/src/parser/parser_assembler_main.rs
index 4a04a7c81..b345be4ea 100644
--- a/src/parser/parser_assembler_main.rs
+++ b/src/parser/parser_assembler_main.rs
@@ -56,7 +56,8 @@ pub fn parser(file_string: String) -> (ProgramInfo, Vec<u32>) {
             &mut program_info.monaco_line_info,
         );
 
-        let (binary, data_starting_point) = create_binary_vec(program_info.instructions.clone(), vec_of_data);
+        let (binary, data_starting_point) =
+            create_binary_vec(program_info.instructions.clone(), vec_of_data);
 
         for entry in &program_info.monaco_line_info {
             program_info
@@ -115,7 +116,8 @@ pub fn parser(file_string: String) -> (ProgramInfo, Vec<u32>) {
             &mut program_info.monaco_line_info,
         );
 
-        let (binary, data_starting_point) = create_binary_vec(program_info.instructions.clone(), vec_of_data);
+        let (binary, data_starting_point) =
+            create_binary_vec(program_info.instructions.clone(), vec_of_data);
 
         for entry in &program_info.monaco_line_info {
             program_info
diff --git a/src/ui/footer/component.rs b/src/ui/footer/component.rs
index 11da3beb7..76b794cc8 100644
--- a/src/ui/footer/component.rs
+++ b/src/ui/footer/component.rs
@@ -1,8 +1,8 @@
 use crate::agent::datapath_communicator::DatapathCommunicator;
-use crate::emulation_core::mips::datapath::MipsDatapath;
+use crate::agent::datapath_reducer::DatapathReducer;
 use crate::ui::console::component::Console;
 use crate::ui::hex_editor::component::HexEditor;
-use crate::ui::visual_datapath::{DatapathSize, VisualDatapath};
+use crate::ui::visual_datapath::VisualDatapath;
 use monaco::api::TextModel;
 use wasm_bindgen::JsCast;
 use web_sys::HtmlElement;
@@ -12,7 +12,7 @@ use yew_hooks::prelude::*;
 #[derive(PartialEq, Properties)]
 pub struct Footerprops {
     pub communicator: &'static DatapathCommunicator,
-    pub datapath: MipsDatapath,
+    pub datapath_state: UseReducerHandle<DatapathReducer>,
     pub parsermsg: String,
     pub show_input: UseStateHandle<bool>,
     pub command: UseStateHandle<String>,
@@ -32,7 +32,6 @@ pub enum FooterTabState {
 #[function_component(Footer)]
 pub fn footer(props: &Footerprops) -> Html {
     let active_tab = &props.active_tab;
-    let zoom_datapath = use_bool_toggle(false);
     let switch_datapath = use_bool_toggle(false);
     let change_tab = {
         let active_tab = active_tab.clone();
@@ -53,19 +52,6 @@ pub fn footer(props: &Footerprops) -> Html {
         })
     };
 
-    let toggle_zoom = {
-        let zoom_datapath = zoom_datapath.clone();
-
-        Callback::from(move |_| {
-            zoom_datapath.toggle();
-        })
-    };
-
-    let datapath_size = match *zoom_datapath {
-        true => DatapathSize::Big,
-        false => DatapathSize::Small,
-    };
-
     let switch_datapath_type = {
         let switch_datapath = switch_datapath.clone();
 
@@ -92,9 +78,7 @@ pub fn footer(props: &Footerprops) -> Html {
                     <Console communicator={props.communicator} parsermsg={props.parsermsg.clone()} show_input={props.show_input.clone()} command={props.command.clone()}/>
                 </div>
             } else if **active_tab == FooterTabState::Datapath {
-                <div class="datapath-wrapper">
-                    <VisualDatapath datapath={props.datapath.clone()} svg_path={svg_path} size={datapath_size} />
-                </div>
+                <VisualDatapath datapath_state={props.datapath_state.clone()} svg_path={svg_path} />
             } else if **active_tab == FooterTabState::HexEditor {
                 <div class="hex-wrapper">
                     <HexEditor memory_text_model={props.memory_text_model.clone()} instruction_num={props.memory_curr_instr.clone()}/>
@@ -123,7 +107,6 @@ pub fn footer(props: &Footerprops) -> Html {
 
                 if **active_tab == FooterTabState::Datapath {
                     <div class="buttons">
-                        <button class={ classes!("bg-red-500", "button") } onclick={toggle_zoom}>{"Toggle Zoom"}</button>
                         <button class="button" onclick={switch_datapath_type}>{switch_datapath_button_label}</button>
                     </div>
                 }
diff --git a/src/ui/visual_datapath/mod.rs b/src/ui/visual_datapath/mod.rs
index 3139d8e95..b4a9125ce 100644
--- a/src/ui/visual_datapath/mod.rs
+++ b/src/ui/visual_datapath/mod.rs
@@ -30,24 +30,23 @@ use std::{cell::RefCell, rc::Rc};
 use gloo_events::EventListener;
 use log::debug;
 use wasm_bindgen::{JsCast, JsValue};
-use web_sys::{Element, Event, HtmlCollection, HtmlElement};
+use web_sys::{Element, Event, HtmlCollection, HtmlElement, HtmlInputElement};
 use yew::prelude::*;
 
-use crate::emulation_core::mips::datapath::{MipsDatapath, Stage};
 use consts::*;
 use utils::*;
 
+use crate::{agent::datapath_reducer::DatapathReducer, emulation_core::mips::datapath::Stage};
+
 #[derive(PartialEq, Properties)]
 pub struct VisualDatapathProps {
-    pub datapath: MipsDatapath,
+    pub datapath_state: UseReducerHandle<DatapathReducer>,
 
     /// A path to the location of the datapath SVG file. This path should be
     /// relative to the project root.
     ///
     /// For example, "`static/datapath_full.svg`".
     pub svg_path: String,
-
-    pub size: Option<DatapathSize>,
 }
 
 pub struct VisualDatapath {
@@ -56,6 +55,7 @@ pub struct VisualDatapath {
     ///
     /// This can occur if the `svg_path` property of the component changes.
     should_reinitialize: bool,
+    size: Rc<RefCell<i32>>,
 }
 
 #[derive(Clone, Copy, Default, PartialEq)]
@@ -73,20 +73,20 @@ impl Component for VisualDatapath {
         VisualDatapath {
             active_listeners: Rc::new(RefCell::new(vec![])),
             should_reinitialize: false,
+            size: Rc::new(RefCell::new(50)),
         }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        // Set the size of the datapath based on props.
-        let size = ctx.props().size.unwrap_or_default();
-        let size_class = match size {
-            DatapathSize::Big => "big-datapath",
-            DatapathSize::Small => "small-datapath",
-        };
-
+        let zoom_in_size = Rc::clone(&self.size);
+        let zoom_range_size = Rc::clone(&self.size);
+        let zoom_value_size = Rc::clone(&self.size);
+        let zoom_out_size = Rc::clone(&self.size);
         html! {
-            <>
-                <object data={ctx.props().svg_path.clone()} type="image/svg+xml" id={DATAPATH_ID} class={size_class}></object>
+            <div class="datapath-wrapper">
+                <div class="datapath-object-wrapper">
+                    <object data={ctx.props().svg_path.clone()} type="image/svg+xml" id={DATAPATH_ID} class={classes!("datapath", format!("size-{}", self.size.borrow()))}></object>
+                </div>
                 <div id="popup">
                     <h1 class="title">{ "[Title]" }</h1>
                     <p class="description">{ "[Description]" }</p>
@@ -96,7 +96,32 @@ impl Component for VisualDatapath {
                         <span class="meaning">{ "[base 10]" }</span>
                     </div>
                 </div>
-            </>
+                <div id="datapath-zoom-controls">
+                    <button class="zoom-button" onclick={ctx.link().callback(move |_| {
+                        let mut size = zoom_out_size.borrow_mut();
+                        *size -= 10;
+                    })}>
+                        <svg class="icon icon-minus" viewBox="0 0 32 32">
+                            <path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"></path>
+                        </svg>
+                    </button>
+                    <input type="range" min="0" max="200" step="10" value={zoom_value_size.borrow().to_string()} class="slider" id="datapath-zoom-slider" onchange={ctx.link().callback(move |e: Event| {
+                        let target = e.target().unwrap().unchecked_into::<HtmlInputElement>();
+                        let value = target.value().parse::<i32>().unwrap();
+                        log::debug!("Value: {:?}", value);
+                        let mut size = zoom_range_size.borrow_mut();
+                        *size = value;
+                    })}/>
+                    <button class="zoom-button" onclick={ctx.link().callback(move |_| {
+                        let mut size = zoom_in_size.borrow_mut();
+                        *size += 10;
+                    })}>
+                        <svg class="icon icon-plus" viewBox="0 0 32 32">
+                            <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
         }
     }
 
@@ -105,7 +130,7 @@ impl Component for VisualDatapath {
         // there is actual data to view. A better way to see this is "when stage X is
         // set on the datapath, highlight the lines for stage Y." The datapath stage
         // tells where it will start the next time "execute" is pressed.
-        let current_stage = String::from(match ctx.props().datapath.current_stage {
+        let current_stage = String::from(match ctx.props().datapath_state.mips.current_stage {
             Stage::InstructionFetch => "writeback",
             Stage::InstructionDecode => "instruction_fetch",
             Stage::Execute => "instruction_decode",
@@ -115,13 +140,13 @@ impl Component for VisualDatapath {
 
         debug!("Current stage: {:?}", current_stage);
         if first_render || self.should_reinitialize {
-            self.initialize(current_stage, ctx.props().datapath.clone());
+            self.initialize(current_stage, ctx.props().datapath_state.clone());
             self.should_reinitialize = false;
         } else {
             let result = Self::highlight_stage(
                 &get_g_elements(),
                 current_stage,
-                ctx.props().datapath.clone(),
+                &ctx.props().datapath_state.clone(),
             );
 
             // Capture new event listeners.
@@ -181,7 +206,11 @@ impl VisualDatapath {
     /// circumvented by creating an event listener on the `<object>` element for the
     /// "load" event, which will guarantee when that virtual DOM is actually ready
     /// to be manipulated.
-    pub fn initialize(&mut self, current_stage: String, datapath: MipsDatapath) {
+    pub fn initialize(
+        &mut self,
+        current_stage: String,
+        datapath_state: UseReducerHandle<DatapathReducer>,
+    ) {
         let on_load = Callback::from(move |_| {
             let nodes = get_g_elements();
 
@@ -210,7 +239,7 @@ impl VisualDatapath {
                     });
                 }
             });
-            Self::highlight_stage(&nodes, current_stage.clone(), datapath.clone())
+            Self::highlight_stage(&nodes, current_stage.clone(), &datapath_state.clone())
         });
 
         let active_listeners = Rc::clone(&self.active_listeners);
@@ -253,7 +282,7 @@ impl VisualDatapath {
     pub fn highlight_stage(
         nodes: &HtmlCollection,
         stage: String,
-        datapath: MipsDatapath,
+        datapath_state: &UseReducerHandle<DatapathReducer>,
     ) -> Result<Vec<EventListener>, JsValue> {
         let mut active_listeners: Vec<EventListener> = vec![];
 
@@ -261,7 +290,7 @@ impl VisualDatapath {
             if element.has_attribute("data-stage") {
                 let is_in_current_stage = element.get_attribute("data-stage").unwrap() == stage;
                 if let Ok(listeners) =
-                    Self::enable_interactivity(element, datapath.clone(), is_in_current_stage)
+                    Self::enable_interactivity(element, datapath_state, is_in_current_stage)
                 {
                     for l in listeners {
                         active_listeners.push(l);
@@ -281,7 +310,7 @@ impl VisualDatapath {
     /// If successful, returns a [`Vec<EventListener>`] containing the newly created event listeners.
     pub fn enable_interactivity(
         element: &Element,
-        datapath: MipsDatapath,
+        datapath_state: &UseReducerHandle<DatapathReducer>,
         is_active: bool,
     ) -> Result<Vec<EventListener>, JsValue> {
         // Color a line when hovering.
@@ -300,39 +329,6 @@ impl VisualDatapath {
             }
         });
 
-        // Show the popup when hovering.
-        let popup_on_mouseover = Callback::from(move |event: web_sys::Event| {
-            let event = event.unchecked_into::<MouseEvent>();
-
-            // Get relevant elements.
-            let target = event.target().unwrap().unchecked_into::<HtmlElement>();
-            let popup = get_popup_element();
-
-            // Show popup.
-            let variable = target
-                .parent_element()
-                .unwrap()
-                .get_attribute("data-variable")
-                .unwrap_or_default();
-            populate_popup_information(&datapath, &variable);
-
-            // Calculate popup position.
-            let mouse_position = get_datapath_iframe_mouse_position(event);
-            let popup_size = (popup.offset_width(), popup.offset_height());
-            let popup_position =
-                calculate_popup_position(mouse_position, popup_size, get_window_size());
-
-            popup
-                .style()
-                .set_property("left", &format!("{}px", popup_position.0))
-                .ok();
-            popup
-                .style()
-                .set_property("top", &format!("{}px", popup_position.1))
-                .ok();
-            popup.style().set_property("display", "block").ok();
-        });
-
         // Move the popup if the mouse moves while still hovering.
         let popup_on_mousemove = Callback::from(move |event: Event| {
             let event = event.unchecked_into::<MouseEvent>();
@@ -396,10 +392,37 @@ impl VisualDatapath {
                         color_on_mouseout.emit(event.clone())
                     });
 
-                let popup_on_mouseover = popup_on_mouseover.clone();
+                let datapath_state_ref = datapath_state.clone();
                 let popup_on_mouseover_listener =
                     EventListener::new(&path, "mouseover", move |event| {
-                        popup_on_mouseover.emit(event.clone())
+                        let event = event.clone().unchecked_into::<MouseEvent>();
+                        // Get relevant elements.
+                        let target = event.target().unwrap().unchecked_into::<HtmlElement>();
+                        let popup = get_popup_element();
+
+                        // Show popup.
+                        let variable = target
+                            .parent_element()
+                            .unwrap()
+                            .get_attribute("data-variable")
+                            .unwrap_or_default();
+                        populate_popup_information(&datapath_state_ref, &variable);
+
+                        // Calculate popup position.
+                        let mouse_position = get_datapath_iframe_mouse_position(event);
+                        let popup_size = (popup.offset_width(), popup.offset_height());
+                        let popup_position =
+                            calculate_popup_position(mouse_position, popup_size, get_window_size());
+
+                        popup
+                            .style()
+                            .set_property("left", &format!("{}px", popup_position.0))
+                            .ok();
+                        popup
+                            .style()
+                            .set_property("top", &format!("{}px", popup_position.1))
+                            .ok();
+                        popup.style().set_property("display", "block").ok();
                     });
 
                 let popup_on_mousemove = popup_on_mousemove.clone();
diff --git a/src/ui/visual_datapath/utils.rs b/src/ui/visual_datapath/utils.rs
index 38afb0046..f0c67597a 100644
--- a/src/ui/visual_datapath/utils.rs
+++ b/src/ui/visual_datapath/utils.rs
@@ -3,8 +3,12 @@
 use gloo::utils::{document, window};
 use wasm_bindgen::JsCast;
 use web_sys::{Element, HtmlCollection, HtmlElement, HtmlObjectElement, MouseEvent};
+use yew::UseReducerHandle;
 
-use crate::emulation_core::{datapath::VisualDatapath, mips::datapath::MipsDatapath};
+use crate::{
+    agent::datapath_reducer::DatapathReducer,
+    emulation_core::{architectures::AvailableDatapaths, mips::line_info::LineInformation},
+};
 
 use super::consts::*;
 
@@ -138,7 +142,10 @@ where
 /// Parameters:
 /// - `datapath`: A reference to the datapath that information will be pulled from.
 /// - `variable`: The "variable" attribute of the line in the diagram that will have information.
-pub fn populate_popup_information(datapath: &MipsDatapath, variable: &str) {
+pub fn populate_popup_information(
+    datapath_state: &UseReducerHandle<DatapathReducer>,
+    variable: &str,
+) {
     let popup = get_popup_element();
 
     let title = popup.query_selector(".title").unwrap().unwrap();
@@ -146,7 +153,7 @@ pub fn populate_popup_information(datapath: &MipsDatapath, variable: &str) {
     let bits = popup.query_selector(".data .code").unwrap().unwrap();
     let meaning = popup.query_selector(".meaning").unwrap().unwrap();
 
-    let information = datapath.visual_line_to_data(variable);
+    let information = visual_line_to_data(variable, datapath_state);
 
     title.set_text_content(Some(&information.title));
     description.set_text_content(Some(&information.description));
@@ -170,3 +177,638 @@ pub fn u64_to_bits(mut value: u64, bits: u64) -> String {
 
     output
 }
+
+pub fn visual_line_to_data(
+    variable: &str,
+    datapath_state: &UseReducerHandle<DatapathReducer>,
+) -> LineInformation {
+    match datapath_state.current_architecture {
+        AvailableDatapaths::MIPS => {
+            match variable {
+                "alu_input2" => LineInformation {
+                    title: String::from("ALU Input 2"),
+                    description: String::from("The second input to the ALU. This is determined by the ALUSrc control signal to select between register data, a sign-extended and left-shifted immediate value, or a zero-extended immediate value."),
+                    value: datapath_state.mips.state.alu_input2,
+                    bits: 64,
+                },
+                "alu_result" => LineInformation {
+                    title: String::from("ALU Result"),
+                    description: String::from("The result of the calculation performed by the ALU. This is used either as an address to access memory or as a value that is saved into a register."),
+                    value: datapath_state.mips.state.alu_result,
+                    bits: 64,
+                },
+                "data_result" => LineInformation {
+                    title: String::from("Writeback Data"),
+                    description: String::from("After finishing processing the instruction, this will either be the ALU result, data from memory, or PC + 4, based on the MemToReg control signal. This data is saved into registers."),
+                    value: datapath_state.mips.state.data_result,
+                    bits: 64,
+                },
+                "fpu_alu_result" => LineInformation {
+                    title: String::from("Floating-Point ALU Result"),
+                    description: String::from("The result of the calculation performed by the floating-point ALU. This is used as an option to be written to a floating-point register, based on the DataWrite and FpuMemToReg control signals."),
+                    value: datapath_state.mips.coprocessor.state.alu_result,
+                    bits: 64,
+                },
+                "fpu_branch_decision" => LineInformation {
+                    title: String::from("FPU Branch Decision"),
+                    description: String::from("Based on the true/false branch flag, determines whether to branch. (The FpuBranch control signal must also be set.)"),
+                    value: datapath_state.mips.coprocessor.state.condition_code_mux as u64,
+                    bits: 1,
+                },
+                "fpu_branch_flag" => LineInformation {
+                    title: String::from("Instruction [16] (True/False Branch Flag)"),
+                    description: String::from("The true/false branch flag of branching datapath_state.mips.coprocessor instructions. This flag specifies whether a floating-point branch instruction is BC1T or BC1F."),
+                    value: datapath_state.mips.coprocessor.state.branch_flag as u64,
+                    bits: 1,
+                },
+                "fpu_comparator_result" => LineInformation {
+                    title: String::from("Floating-Point Comparator Result"),
+                    description: String::from("The result of the comparison of two floating-point values. This is routed to the \"Condition Code\" (cc) register, and will be written there if the CcWrite control signal is set."),
+                    value: datapath_state.mips.coprocessor.state.comparator_result,
+                    bits: 64,
+                },
+                "fpu_condition_code" => LineInformation {
+                    title: String::from("Condition Code Value"),
+                    description: String::from("Data retrieved from the \"Condition Code\" (cc) register. This specifies whether a previous conditional instruction was true or false."),
+                    value: datapath_state.mips.coprocessor.state.condition_code_bit as u64,
+                    bits: 1,
+                },
+                "fpu_condition_code_inverted" => LineInformation {
+                    title: String::from("Condition Code Value (Inverted)"),
+                    description: String::from("Inverted form of the condition code register value."),
+                    value: datapath_state.mips.coprocessor.state.condition_code_bit_inverted as u64,
+                    bits: 1,
+                },
+                "fpu_data" => LineInformation {
+                    title: String::from("Floating-Point Data Register Value"),
+                    description: String::from("Data retrieved from the \"Data\" register. This register acts as a means to communicate data between the main processor and floating-point datapath_state.mips.coprocessor in MTC1 and MFC1 instructions."),
+                    value: datapath_state.mips.coprocessor.state.fmt as u64,
+                    bits: 64,
+                },
+                "fpu_data_writeback" => LineInformation {
+                    title: String::from("Floating-Point Data Writeback"),
+                    description: String::from("The value from the floating-point unit's \"Data\" register. Depending on the FpuRegWidth control signal, this will be 64-bit data or sign-extended 32-bit data."),
+                    value: datapath_state.mips.coprocessor.state.data_writeback,
+                    bits: 64,
+                },
+                "fpu_destination" => LineInformation {
+                    title: String::from("Floating-Point Write Register"),
+                    description: String::from("The register that will be written to, assuming FpuRegWrite is set. Depending on the FpuRegDst control signal, this will consist of the fs, ft, or fd register."),
+                    value: datapath_state.mips.coprocessor.state.destination as u64,
+                    bits: 5,
+                },
+                "fpu_fd" => LineInformation {
+                    title: String::from("Instruction [10-6] (fd)"),
+                    description: String::from("The fd field. Depending on the FpuRegDst control signal, this will be the register written to in a floating-point operation. This register is used as the destination for most floating-point arithmetic instructions."),
+                    value: datapath_state.mips.coprocessor.state.fd as u64,
+                    bits: 5,
+                },
+                "fpu_fmt" => LineInformation {
+                    title: String::from("Instruction [25-21] (fmt)"),
+                    description: String::from("The fmt field. This is used to distinguish between single-precision and double-precision floating-point instructions."),
+                    value: datapath_state.mips.coprocessor.state.fmt as u64,
+                    bits: 5,
+                },
+                "fpu_fp_register_data_from_main_processor" => LineInformation {
+                    title: String::from("Writeback Data (To Floating-Point Coprocessor)"),
+                    description: String::from("This data is written to a floating-point register, given FpuMemToReg is set. This line allows data to load from memory to a floating-point register, specifically in the case of the LWC1 instruction."),
+                    value: datapath_state.mips.coprocessor.state.fp_register_data_from_main_processor,
+                    bits: 64,
+                },
+                "fpu_fp_register_to_memory" => LineInformation {
+                    title: String::from("Memory Write Data (from FPU)"),
+                    description: String::from("If the MemWriteSrc control signal is set, this data will be written to memory. This is used for the SWC1 instruction."),
+                    value: datapath_state.mips.coprocessor.state.fp_register_to_memory,
+                    bits: 64,
+                },
+                "fpu_fs" => LineInformation {
+                    title: String::from("Instruction [15-11] (fs)"),
+                    description: String::from("The fs field. Contains the first register to be read for a floating-point instruction."),
+                    value: datapath_state.mips.coprocessor.state.fs as u64,
+                    bits: 5,
+                },
+                "fpu_ft" => LineInformation {
+                    title: String::from("Instruction [20-16] (ft)"),
+                    description: String::from("The ft field. Contains the second register to be read for a floating-point instruction."),
+                    value: datapath_state.mips.coprocessor.state.ft as u64,
+                    bits: 5,
+                },
+                "fpu_new_data" => LineInformation {
+                    title: String::from("New Floating-Point Data Register Value"),
+                    description: String::from("Data sent to the \"Data\" register. Depending on the DataSrc control signal, this will either be data from the main processor or the floating-point datapath_state.mips.coprocessor. This register acts as a means to communicate data between the main processor and floating-point datapath_state.mips.coprocessor in MTC1 and MFC1 instructions."),
+                    value: datapath_state.mips.coprocessor.state.fmt as u64,
+                    bits: 64,
+                },
+                "fpu_read_data_1" => LineInformation {
+                    title: String::from("FPU Read Data 1"),
+                    description: String::from("Data retrieved from the register specified by the fs instruction field. This is used as the first inputs to the floating-point ALU and comparator. This can additionally be written to the \"Data\" register, based on the DataSrc and DataWrite control signals."),
+                    value: datapath_state.mips.coprocessor.state.read_data_1,
+                    bits: 64,
+                },
+                "fpu_read_data_2" => LineInformation {
+                    title: String::from("FPU Read Data 2"),
+                    description: String::from("Data retrieved from the register specified by the ft instruction field. This is used as the second inputs to the floating-point ALU and comparator. This can additionally be used as data to be written to memory, based on the MemWriteSrc control signal."),
+                    value: datapath_state.mips.coprocessor.state.read_data_2,
+                    bits: 64,
+                },
+                "fpu_register_write_data" => LineInformation {
+                    title: String::from("FPU Register Write Data"),
+                    description: String::from("Data that will be written to a floating-point register, given that FpuRegWrite is set."),
+                    value: datapath_state.mips.coprocessor.state.register_write_data,
+                    bits: 64,
+                },
+                "fpu_register_write_mux_to_mux" => LineInformation {
+                    title: String::from("FPU Register Write Data (When FpuMemToReg is Unset)"),
+                    description: String::from("Based on the DataWrite control signal, this will either be the result of the floating-point ALU or the contents of the \"Data\" register. (The \"Data\" register is used for transferring data between the processor and floating-point datapath_state.mips.coprocessor.)"),
+                    value: datapath_state.mips.coprocessor.state.register_write_mux_to_mux,
+                    bits: 64,
+                },
+                "fpu_sign_extend_data" => LineInformation {
+                    title: String::from("Floating-Point Data Register Value (Sign-Extended)"),
+                    description: String::from("In the case where FpuRegWidth indicates a 32-bit width, this is the bottom 32 bits of the value from the \"Data\" register, then sign-extended to 64 bits."),
+                    value: datapath_state.mips.coprocessor.state.sign_extend_data,
+                    bits: 64,
+                },
+                "funct" => LineInformation {
+                    title: String::from("Instruction [5-0] (funct)"),
+                    description: String::from("The funct field. Contains the type of operation to execute for R-type instructions."),
+                    value: datapath_state.mips.state.funct as u64,
+                    bits: 6,
+                },
+                "imm" => LineInformation {
+                    title: String::from("Instruction [15-0] (immediate)"),
+                    description: String::from("The immediate field. Contains the 16-bit constant value used for I-type instructions."),
+                    value: datapath_state.mips.state.imm as u64,
+                    bits: 16,
+                },
+                "instruction" => LineInformation {
+                    title: String::from("Instruction"),
+                    description: String::from("The currently-loaded instruction. This is broken down into different fields, where each field serves a different purpose in identifying what the instruction does."),
+                    value: datapath_state.mips.state.instruction as u64,
+                    bits: 32,
+                },
+                "jump_address" => LineInformation {
+                    title: String::from("Jump Address"),
+                    description: String::from("The concatenation of the upper 36 bits of PC + 4 with the lower 26 bits of the instruction, shifted left by 2. This is used as the new PC value for J-type instructions."),
+                    value: datapath_state.mips.state.jump_address,
+                    bits: 64,
+                },
+                "lower_26" => LineInformation {
+                    title: String::from("Instruction [25-0]"),
+                    description: String::from("The lower 26 bits of instruction. This is used as part of the new PC value for J-type instructions."),
+                    value: datapath_state.mips.state.lower_26 as u64,
+                    bits: 26,
+                },
+                "lower_26_shifted_left_by_2" => LineInformation {
+                    title: String::from("Instruction [25-0] << 2"),
+                    description: String::from("The lower 26 bits of instruction, shifted left by 2. This is used as part of the new PC value for J-type instructions."),
+                    value: datapath_state.mips.state.lower_26_shifted_left_by_2 as u64,
+                    bits: 28,
+                },
+                "mem_mux1_to_mem_mux2" => LineInformation {
+                    title: String::from("Relative PC Address"),
+                    description: String::from("Based on the control signals for branching and jumping, this address may be the next PC value. This is used for general non-branching instructions or branch-type instructions."),
+                    value: datapath_state.mips.state.mem_mux1_to_mem_mux2,
+                    bits: 64,
+                },
+                "memory_data" => LineInformation {
+                    title: String::from("Memory Data"),
+                    description: String::from("The data retrieved from memory, given that the MemRead control signal is set. This may be 32 bits or 64 bits, depending on the RegWidth control signal."),
+                    value: datapath_state.mips.state.memory_data,
+                    bits: 64,
+                },
+                "new_pc" => LineInformation {
+                    title: String::from("New Program Counter"),
+                    description: String::from("The address of the next instruction to execute. In other words, the next value of the program counter (PC) register."),
+                    value: datapath_state.mips.state.new_pc,
+                    bits: 64,
+                },
+                "pc" => LineInformation {
+                    title: String::from("Program Counter"),
+                    description: String::from("The address of the currently-executing instruction."),
+                    value: datapath_state.mips.registers.pc,
+                    bits: 64,
+                },
+                "pc_plus_4" => LineInformation {
+                    title: String::from("PC + 4"),
+                    description: String::from("The address of the currently-executing instruction, plus 4. By default, this will become the next value of the PC register. However, a different address may be used in the case of a branch or jump instruction."),
+                    value: datapath_state.mips.state.pc_plus_4,
+                    bits: 64,
+                },
+                "pc_plus_4_upper" => LineInformation {
+                    title: String::from("PC + 4 [63-28]"),
+                    description: String::from("The upper 36 bits of PC + 4. This is to be concatenated with the lower 26 bits of the instruction to calculate a jump address."),
+                    value: datapath_state.mips.state.pc_plus_4 & 0xffff_ffff_f000_0000 >> 28,
+                    bits: 36,
+                },
+                "ra_id" => LineInformation {
+                    title: String::from("Return Address Register Index"),
+                    description: String::from("The value 31. This represents the thirty-second register, the return address register ($ra)."),
+                    value: 31,
+                    bits: 5,
+                },
+                "rd" => LineInformation {
+                    title: String::from("Instruction [15-11] (rd)"),
+                    description: String::from("The rd field. Depending on the RegDst control signal, this will be the register written to for an instruction. This register is used as the destination for most R-type instructions."),
+                    value: datapath_state.mips.state.rd as u64,
+                    bits: 5,
+                },
+                "read_data_1" => LineInformation {
+                    title: String::from("Read Data 1"),
+                    description: String::from("Data retrieved from the register specified by the rs instruction field. Based on the instruction, this may be used as the first input to the ALU, or the next value of the PC register."),
+                    value: datapath_state.mips.state.read_data_1,
+                    bits: 64,
+                },
+                "read_data_2" => LineInformation {
+                    title: String::from("Read Data 2"),
+                    description: String::from("Data retrieved from the register specified by the rt instruction field. Based on the instruction, this may be used as the second input to the ALU, data written to memory, or data transferred to the floating-point coprocessor."),
+                    value: datapath_state.mips.state.read_data_2,
+                    bits: 64,
+                },
+                "register_write_data" => LineInformation {
+                    title: String::from("Register Write Data"),
+                    description: String::from("Data that will be written to a general-purpose register, given that RegWrite is set."),
+                    value: datapath_state.mips.state.register_write_data,
+                    bits: 64,
+                },
+                "relative_pc_branch" => LineInformation {
+                    title: String::from("Relative PC Branch Address"),
+                    description: String::from("The relative address used in branch instructions. This is the sum of PC + 4 and the sign-extended immediate value, shifted left by 2."),
+                    value: datapath_state.mips.state.relative_pc_branch,
+                    bits: 64,
+                },
+                "rs" => LineInformation {
+                    title: String::from("Instruction [25-21] (rs)"),
+                    description: String::from("The rs field. Contains the first register to be read for an instruction."),
+                    value: datapath_state.mips.state.rs as u64,
+                    bits: 5,
+                },
+                "rt" => LineInformation {
+                    title: String::from("Instruction [20-16] (rt)"),
+                    description: String::from("The rt field. Contains the second register to be read for an instruction."),
+                    value: datapath_state.mips.state.rt as u64,
+                    bits: 5,
+                },
+                "shamt" => LineInformation {
+                    title: String::from("Instruction [10-6] (shamt)"),
+                    description: String::from("The shamt (\"shift amount\") field. Specifies the number of bits to shift for those instructions that perform bit-shifting."),
+                    value: datapath_state.mips.state.shamt as u64,
+                    bits: 5,
+                },
+                "sign_extend" => LineInformation {
+                    title: String::from("Sign-Extended Immediate"),
+                    description: String::from("The immediate field, sign-extended to a 64-bit value."),
+                    value: datapath_state.mips.state.sign_extend,
+                    bits: 64,
+                },
+                "sign_extend_shift_left_by_2" => LineInformation {
+                    title: String::from("Sign-Extended Immediate << 2"),
+                    description: String::from("The immediate field, sign-extended to a 64-bit value, then shifted left by 2."),
+                    value: datapath_state.mips.state.sign_extend_shift_left_by_2,
+                    bits: 64,
+                },
+                "write_data" => LineInformation {
+                    title: String::from("Memory Write Data"),
+                    description: String::from("Given that the MemWrite control signal is set, this data will be written to memory."),
+                    value: datapath_state.mips.state.write_data,
+                    bits: 64,
+                },
+                "write_register" => LineInformation {
+                    title: String::from("Write Register"),
+                    description: String::from("The register that will be written to, assuming RegWrite is set. Depending on the RegDst control signal, this will consist of the rs, rt, or rd register, or 31 (indicating the $ra register)."),
+                    value: datapath_state.mips.state.write_register_destination as u64,
+                    bits: 5,
+                },
+                "zero_extended_immediate" => LineInformation {
+                    title: String::from("Zero-Extended Immediate"),
+                    description: String::from("The immediate field, zero-extended to a 64-bit value."),
+                    value: datapath_state.mips.state.imm as u64,
+                    bits: 64,
+                },
+                _ => LineInformation {
+                    title: String::from("[Title]"),
+                    description: String::from("[Description]"),
+                    value: 0,
+                    bits: 0,
+                },
+            }
+        },
+        AvailableDatapaths::RISCV => {
+            // just a stand in
+            LineInformation {
+                title: String::from("ALU Input 2"),
+                description: String::from("The second input to the ALU. This is determined by the ALUSrc control signal to select between register data, a sign-extended and left-shifted immediate value, or a zero-extended immediate value."),
+                value: datapath_state.mips.state.alu_input2,
+                bits: 64
+            }
+    //     match variable {
+    //         "alu_input2" => LineInformation {
+    //             title: String::from("ALU Input 2"),
+    //             description: String::from("The second input to the ALU. This is determined by the ALUSrc control signal to select between register data, a sign-extended and left-shifted immediate value, or a zero-extended immediate value."),
+    //             value: datapath_state.riscv.state.alu_input2,
+    //             bits: 64,
+    //         },
+    //         "alu_result" => LineInformation {
+    //             title: String::from("ALU Result"),
+    //             description: String::from("The result of the calculation performed by the ALU. This is used either as an address to access memory or as a value that is saved into a register."),
+    //             value: datapath_state.riscv.state.alu_result,
+    //             bits: 64,
+    //         },
+    //         "data_result" => LineInformation {
+    //             title: String::from("Writeback Data"),
+    //             description: String::from("After finishing processing the instruction, this will either be the ALU result, data from memory, or PC + 4, based on the MemToReg control signal. This data is saved into registers."),
+    //             value: datapath_state.riscv.state.data_result,
+    //             bits: 64,
+    //         },
+    //         "fpu_alu_result" => LineInformation {
+    //             title: String::from("Floating-Point ALU Result"),
+    //             description: String::from("The result of the calculation performed by the floating-point ALU. This is used as an option to be written to a floating-point register, based on the DataWrite and FpuMemToReg control signals."),
+    //             value: datapath_state.riscv.coprocessor.state.alu_result,
+    //             bits: 64,
+    //         },
+    //         "fpu_branch_decision" => LineInformation {
+    //             title: String::from("FPU Branch Decision"),
+    //             description: String::from("Based on the true/false branch flag, determines whether to branch. (The FpuBranch control signal must also be set.)"),
+    //             value: datapath_state.riscv.coprocessor.state.condition_code_mux as u64,
+    //             bits: 1,
+    //         },
+    //         "fpu_branch_flag" => LineInformation {
+    //             title: String::from("Instruction [16] (True/False Branch Flag)"),
+    //             description: String::from("The true/false branch flag of branching coprocessor instructions. This flag specifies whether a floating-point branch instruction is BC1T or BC1F."),
+    //             value: datapath_state.riscv.coprocessor.state.branch_flag as u64,
+    //             bits: 1,
+    //         },
+    //         "fpu_comparator_result" => LineInformation {
+    //             title: String::from("Floating-Point Comparator Result"),
+    //             description: String::from("The result of the comparison of two floating-point values. This is routed to the \"Condition Code\" (cc) register, and will be written there if the CcWrite control signal is set."),
+    //             value: datapath_state.riscv.coprocessor.state.comparator_result,
+    //             bits: 64,
+    //         },
+    //         "fpu_condition_code" => LineInformation {
+    //             title: String::from("Condition Code Value"),
+    //             description: String::from("Data retrieved from the \"Condition Code\" (cc) register. This specifies whether a previous conditional instruction was true or false."),
+    //             value: datapath_state.riscv.coprocessor.state.condition_code_bit as u64,
+    //             bits: 1,
+    //         },
+    //         "fpu_condition_code_inverted" => LineInformation {
+    //             title: String::from("Condition Code Value (Inverted)"),
+    //             description: String::from("Inverted form of the condition code register value."),
+    //             value: datapath_state.riscv.coprocessor.state.condition_code_bit_inverted as u64,
+    //             bits: 1,
+    //         },
+    //         "fpu_data" => LineInformation {
+    //             title: String::from("Floating-Point Data Register Value"),
+    //             description: String::from("Data retrieved from the \"Data\" register. This register acts as a means to communicate data between the main processor and floating-point coprocessor in MTC1 and MFC1 instructions."),
+    //             value: datapath_state.riscv.coprocessor.state.fmt as u64,
+    //             bits: 64,
+    //         },
+    //         "fpu_data_writeback" => LineInformation {
+    //             title: String::from("Floating-Point Data Writeback"),
+    //             description: String::from("The value from the floating-point unit's \"Data\" register. Depending on the FpuRegWidth control signal, this will be 64-bit data or sign-extended 32-bit data."),
+    //             value: datapath_state.riscv.coprocessor.state.data_writeback,
+    //             bits: 64,
+    //         },
+    //         "fpu_destination" => LineInformation {
+    //             title: String::from("Floating-Point Write Register"),
+    //             description: String::from("The register that will be written to, assuming FpuRegWrite is set. Depending on the FpuRegDst control signal, this will consist of the fs, ft, or fd register."),
+    //             value: datapath_state.riscv.coprocessor.state.destination as u64,
+    //             bits: 5,
+    //         },
+    //         "fpu_fd" => LineInformation {
+    //             title: String::from("Instruction [10-6] (fd)"),
+    //             description: String::from("The fd field. Depending on the FpuRegDst control signal, this will be the register written to in a floating-point operation. This register is used as the destination for most floating-point arithmetic instructions."),
+    //             value: datapath_state.riscv.coprocessor.state.fd as u64,
+    //             bits: 5,
+    //         },
+    //         "fpu_fmt" => LineInformation {
+    //             title: String::from("Instruction [25-21] (fmt)"),
+    //             description: String::from("The fmt field. This is used to distinguish between single-precision and double-precision floating-point instructions."),
+    //             value: datapath_state.riscv.coprocessor.state.fmt as u64,
+    //             bits: 5,
+    //         },
+    //         "fpu_fp_register_data_from_main_processor" => LineInformation {
+    //             title: String::from("Writeback Data (To Floating-Point Coprocessor)"),
+    //             description: String::from("This data is written to a floating-point register, given FpuMemToReg is set. This line allows data to load from memory to a floating-point register, specifically in the case of the LWC1 instruction."),
+    //             value: datapath_state.riscv.coprocessor.state.fp_register_data_from_main_processor,
+    //             bits: 64,
+    //         },
+    //         "fpu_fp_register_to_memory" => LineInformation {
+    //             title: String::from("Memory Write Data (from FPU)"),
+    //             description: String::from("If the MemWriteSrc control signal is set, this data will be written to memory. This is used for the SWC1 instruction."),
+    //             value: datapath_state.riscv.coprocessor.state.fp_register_to_memory,
+    //             bits: 64,
+    //         },
+    //         "fpu_fs" => LineInformation {
+    //             title: String::from("Instruction [15-11] (fs)"),
+    //             description: String::from("The fs field. Contains the first register to be read for a floating-point instruction."),
+    //             value: datapath_state.riscv.coprocessor.state.fs as u64,
+    //             bits: 5,
+    //         },
+    //         "fpu_ft" => LineInformation {
+    //             title: String::from("Instruction [20-16] (ft)"),
+    //             description: String::from("The ft field. Contains the second register to be read for a floating-point instruction."),
+    //             value: datapath_state.riscv.coprocessor.state.ft as u64,
+    //             bits: 5,
+    //         },
+    //         "fpu_new_data" => LineInformation {
+    //             title: String::from("New Floating-Point Data Register Value"),
+    //             description: String::from("Data sent to the \"Data\" register. Depending on the DataSrc control signal, this will either be data from the main processor or the floating-point coprocessor. This register acts as a means to communicate data between the main processor and floating-point coprocessor in MTC1 and MFC1 instructions."),
+    //             value: datapath_state.riscv.coprocessor.state.fmt as u64,
+    //             bits: 64,
+    //         },
+    //         "fpu_read_data_1" => LineInformation {
+    //             title: String::from("FPU Read Data 1"),
+    //             description: String::from("Data retrieved from the register specified by the fs instruction field. This is used as the first inputs to the floating-point ALU and comparator. This can additionally be written to the \"Data\" register, based on the DataSrc and DataWrite control signals."),
+    //             value: datapath_state.riscv.coprocessor.state.read_data_1,
+    //             bits: 64,
+    //         },
+    //         "fpu_read_data_2" => LineInformation {
+    //             title: String::from("FPU Read Data 2"),
+    //             description: String::from("Data retrieved from the register specified by the ft instruction field. This is used as the second inputs to the floating-point ALU and comparator. This can additionally be used as data to be written to memory, based on the MemWriteSrc control signal."),
+    //             value: datapath_state.riscv.coprocessor.state.read_data_2,
+    //             bits: 64,
+    //         },
+    //         "fpu_register_write_data" => LineInformation {
+    //             title: String::from("FPU Register Write Data"),
+    //             description: String::from("Data that will be written to a floating-point register, given that FpuRegWrite is set."),
+    //             value: datapath_state.riscv.coprocessor.state.register_write_data,
+    //             bits: 64,
+    //         },
+    //         "fpu_register_write_mux_to_mux" => LineInformation {
+    //             title: String::from("FPU Register Write Data (When FpuMemToReg is Unset)"),
+    //             description: String::from("Based on the DataWrite control signal, this will either be the result of the floating-point ALU or the contents of the \"Data\" register. (The \"Data\" register is used for transferring data between the processor and floating-point coprocessor.)"),
+    //             value: datapath_state.riscv.coprocessor.state.register_write_mux_to_mux,
+    //             bits: 64,
+    //         },
+    //         "fpu_sign_extend_data" => LineInformation {
+    //             title: String::from("Floating-Point Data Register Value (Sign-Extended)"),
+    //             description: String::from("In the case where FpuRegWidth indicates a 32-bit width, this is the bottom 32 bits of the value from the \"Data\" register, then sign-extended to 64 bits."),
+    //             value: datapath_state.riscv.coprocessor.state.sign_extend_data,
+    //             bits: 64,
+    //         },
+    //         "funct" => LineInformation {
+    //             title: String::from("Instruction [5-0] (funct)"),
+    //             description: String::from("The funct field. Contains the type of operation to execute for R-type instructions."),
+    //             value: datapath_state.riscv.state.funct as u64,
+    //             bits: 6,
+    //         },
+    //         "imm" => LineInformation {
+    //             title: String::from("Instruction [15-0] (immediate)"),
+    //             description: String::from("The immediate field. Contains the 16-bit constant value used for I-type instructions."),
+    //             value: datapath_state.riscv.state.imm as u64,
+    //             bits: 16,
+    //         },
+    //         "instruction" => LineInformation {
+    //             title: String::from("Instruction"),
+    //             description: String::from("The currently-loaded instruction. This is broken down into different fields, where each field serves a different purpose in identifying what the instruction does."),
+    //             value: datapath_state.riscv.state.instruction as u64,
+    //             bits: 32,
+    //         },
+    //         "jump_address" => LineInformation {
+    //             title: String::from("Jump Address"),
+    //             description: String::from("The concatenation of the upper 36 bits of PC + 4 with the lower 26 bits of the instruction, shifted left by 2. This is used as the new PC value for J-type instructions."),
+    //             value: datapath_state.riscv.state.jump_address,
+    //             bits: 64,
+    //         },
+    //         "lower_26" => LineInformation {
+    //             title: String::from("Instruction [25-0]"),
+    //             description: String::from("The lower 26 bits of instruction. This is used as part of the new PC value for J-type instructions."),
+    //             value: datapath_state.riscv.state.lower_26 as u64,
+    //             bits: 26,
+    //         },
+    //         "lower_26_shifted_left_by_2" => LineInformation {
+    //             title: String::from("Instruction [25-0] << 2"),
+    //             description: String::from("The lower 26 bits of instruction, shifted left by 2. This is used as part of the new PC value for J-type instructions."),
+    //             value: datapath_state.riscv.state.lower_26_shifted_left_by_2 as u64,
+    //             bits: 28,
+    //         },
+    //         "mem_mux1_to_mem_mux2" => LineInformation {
+    //             title: String::from("Relative PC Address"),
+    //             description: String::from("Based on the control signals for branching and jumping, this address may be the next PC value. This is used for general non-branching instructions or branch-type instructions."),
+    //             value: datapath_state.riscv.state.mem_mux1_to_mem_mux2,
+    //             bits: 64,
+    //         },
+    //         "memory_data" => LineInformation {
+    //             title: String::from("Memory Data"),
+    //             description: String::from("The data retrieved from memory, given that the MemRead control signal is set. This may be 32 bits or 64 bits, depending on the RegWidth control signal."),
+    //             value: datapath_state.riscv.state.memory_data,
+    //             bits: 64,
+    //         },
+    //         "new_pc" => LineInformation {
+    //             title: String::from("New Program Counter"),
+    //             description: String::from("The address of the next instruction to execute. In other words, the next value of the program counter (PC) register."),
+    //             value: datapath_state.riscv.state.new_pc,
+    //             bits: 64,
+    //         },
+    //         "pc" => LineInformation {
+    //             title: String::from("Program Counter"),
+    //             description: String::from("The address of the currently-executing instruction."),
+    //             value: datapath_state.riscv.registers.pc,
+    //             bits: 64,
+    //         },
+    //         "pc_plus_4" => LineInformation {
+    //             title: String::from("PC + 4"),
+    //             description: String::from("The address of the currently-executing instruction, plus 4. By default, this will become the next value of the PC register. However, a different address may be used in the case of a branch or jump instruction."),
+    //             value: datapath_state.riscv.state.pc_plus_4,
+    //             bits: 64,
+    //         },
+    //         "pc_plus_4_upper" => LineInformation {
+    //             title: String::from("PC + 4 [63-28]"),
+    //             description: String::from("The upper 36 bits of PC + 4. This is to be concatenated with the lower 26 bits of the instruction to calculate a jump address."),
+    //             value: datapath_state.riscv.state.pc_plus_4 & 0xffff_ffff_f000_0000 >> 28,
+    //             bits: 36,
+    //         },
+    //         "ra_id" => LineInformation {
+    //             title: String::from("Return Address Register Index"),
+    //             description: String::from("The value 31. This represents the thirty-second register, the return address register ($ra)."),
+    //             value: 31,
+    //             bits: 5,
+    //         },
+    //         "rd" => LineInformation {
+    //             title: String::from("Instruction [15-11] (rd)"),
+    //             description: String::from("The rd field. Depending on the RegDst control signal, this will be the register written to for an instruction. This register is used as the destination for most R-type instructions."),
+    //             value: datapath_state.riscv.state.rd as u64,
+    //             bits: 5,
+    //         },
+    //         "read_data_1" => LineInformation {
+    //             title: String::from("Read Data 1"),
+    //             description: String::from("Data retrieved from the register specified by the rs instruction field. Based on the instruction, this may be used as the first input to the ALU, or the next value of the PC register."),
+    //             value: datapath_state.riscv.state.read_data_1,
+    //             bits: 64,
+    //         },
+    //         "read_data_2" => LineInformation {
+    //             title: String::from("Read Data 2"),
+    //             description: String::from("Data retrieved from the register specified by the rt instruction field. Based on the instruction, this may be used as the second input to the ALU, data written to memory, or data transferred to the floating-point coprocessor."),
+    //             value: datapath_state.riscv.state.read_data_2,
+    //             bits: 64,
+    //         },
+    //         "register_write_data" => LineInformation {
+    //             title: String::from("Register Write Data"),
+    //             description: String::from("Data that will be written to a general-purpose register, given that RegWrite is set."),
+    //             value: datapath_state.riscv.state.register_write_data,
+    //             bits: 64,
+    //         },
+    //         "relative_pc_branch" => LineInformation {
+    //             title: String::from("Relative PC Branch Address"),
+    //             description: String::from("The relative address used in branch instructions. This is the sum of PC + 4 and the sign-extended immediate value, shifted left by 2."),
+    //             value: datapath_state.riscv.state.relative_pc_branch,
+    //             bits: 64,
+    //         },
+    //         "rs" => LineInformation {
+    //             title: String::from("Instruction [25-21] (rs)"),
+    //             description: String::from("The rs field. Contains the first register to be read for an instruction."),
+    //             value: datapath_state.riscv.state.rs as u64,
+    //             bits: 5,
+    //         },
+    //         "rt" => LineInformation {
+    //             title: String::from("Instruction [20-16] (rt)"),
+    //             description: String::from("The rt field. Contains the second register to be read for an instruction."),
+    //             value: datapath_state.riscv.state.rt as u64,
+    //             bits: 5,
+    //         },
+    //         "shamt" => LineInformation {
+    //             title: String::from("Instruction [10-6] (shamt)"),
+    //             description: String::from("The shamt (\"shift amount\") field. Specifies the number of bits to shift for those instructions that perform bit-shifting."),
+    //             value: datapath_state.riscv.state.shamt as u64,
+    //             bits: 5,
+    //         },
+    //         "sign_extend" => LineInformation {
+    //             title: String::from("Sign-Extended Immediate"),
+    //             description: String::from("The immediate field, sign-extended to a 64-bit value."),
+    //             value: datapath_state.riscv.state.sign_extend,
+    //             bits: 64,
+    //         },
+    //         "sign_extend_shift_left_by_2" => LineInformation {
+    //             title: String::from("Sign-Extended Immediate << 2"),
+    //             description: String::from("The immediate field, sign-extended to a 64-bit value, then shifted left by 2."),
+    //             value: datapath_state.riscv.state.sign_extend_shift_left_by_2,
+    //             bits: 64,
+    //         },
+    //         "write_data" => LineInformation {
+    //             title: String::from("Memory Write Data"),
+    //             description: String::from("Given that the MemWrite control signal is set, this data will be written to memory."),
+    //             value: datapath_state.riscv.state.write_data,
+    //             bits: 64,
+    //         },
+    //         "write_register" => LineInformation {
+    //             title: String::from("Write Register"),
+    //             description: String::from("The register that will be written to, assuming RegWrite is set. Depending on the RegDst control signal, this will consist of the rs, rt, or rd register, or 31 (indicating the $ra register)."),
+    //             value: datapath_state.riscv.state.write_register_destination as u64,
+    //             bits: 5,
+    //         },
+    //         "zero_extended_immediate" => LineInformation {
+    //             title: String::from("Zero-Extended Immediate"),
+    //             description: String::from("The immediate field, zero-extended to a 64-bit value."),
+    //             value: datapath_state.riscv.state.imm as u64,
+    //             bits: 64,
+    //         },
+    //         _ => LineInformation {
+    //             title: String::from("[Title]"),
+    //             description: String::from("[Description]"),
+    //             value: 0,
+    //             bits: 0,
+    //         },
+    //     }
+        }
+    }
+}
diff --git a/static/styles/main.css b/static/styles/main.css
index f98a1660d..41858ebdc 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -41,6 +41,16 @@ body {
   background-color: #2e2b2b;
 }
 
+/****** Icons ******/
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+
 /****** Editor ******/
 .code {
   display: flex;
@@ -221,13 +231,19 @@ body {
 }
 
 .datapath-wrapper {
+  max-height: 50%;
+}
+
+.datapath-object-wrapper {
   flex-grow: 1.4;
   /* border: 2px solid black; */
   overflow: auto;
   width: 100%;
+  height: 100%;
   flex-basis: 50%;
   background-color: #FFF;
   z-index: 1;
+  position: relative;
 }
 
 .button-bar {
diff --git a/static/styles/visual_datapath.css b/static/styles/visual_datapath.css
index d36c624e5..77941e453 100644
--- a/static/styles/visual_datapath.css
+++ b/static/styles/visual_datapath.css
@@ -6,6 +6,81 @@
   width: auto;
 }
 
+#datapath-zoom-controls {
+  position: absolute;
+  left: 27px;
+  bottom: 66px;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/** Zoom Levels **/
+.datapath.size-0 {
+  width: 100%;
+}
+.datapath.size-10 {
+  width: 110%;
+}
+.datapath.size-20 {
+  width: 120%;
+}
+.datapath.size-30 {
+  width: 130%;
+}
+.datapath.size-40 {
+  width: 140%;
+}
+.datapath.size-50 {
+  width: 150%;
+}
+.datapath.size-60 {
+  width: 160%;
+}
+.datapath.size-70 {
+  width: 170%;
+}
+.datapath.size-80 {
+  width: 180%;
+}
+.datapath.size-90 {
+  width: 190%;
+}
+.datapath.size-100 {
+  width: 200%;
+}
+.datapath.size-110 {
+  width: 210%;
+}
+.datapath.size-120 {
+  width: 220%;
+}
+.datapath.size-130 {
+  width: 230%;
+}
+.datapath.size-140 {
+  width: 240%;
+}
+.datapath.size-150 {
+  width: 250%;
+}
+.datapath.size-160 {
+  width: 260%;
+}
+.datapath.size-170 {
+  width: 270%;
+}
+.datapath.size-180 {
+  width: 280%;
+}
+.datapath.size-190 {
+  width: 290%;
+}
+.datapath.size-200 {
+  width: 300%;
+}
+
 #popup {
   display: none;
   position: absolute;