Some css improvements

frontend/src/App.tsx

@@ -3,22 +3,20 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Home from './Home';
 import Visualization from './Visualization';
 import Header from './Header';
-import './App.css'
 
-function App() {
+function GCVizApp() {
     return (
         <Router>
-            <div className='app'>
+            <>
                 <Header />
-
                 <Routes>
                     <Route path="/" element={<Home />} />
                     <Route path="/visualize" element={<Visualization />} />
                     <Route path="/visualize/:program_name" element={<Visualization />} />
                 </Routes>
-            </div>
+            </>
         </Router>
     );
 }
 
-export default App;
+export default GCVizApp;

frontend/src/EventStream.css

@@ -1,14 +1,15 @@
 .event-stream {
     padding: 10px;
-    margin: 0 10px;
-    max-height: 75vh;
+    margin: 10px 10px;
     overflow-y: auto; /* Make it scrollable vertically */
     border: 1px solid #e0e0e0; /* Light grey border */
     background-color: #f5f5f5; /* A pleasant grey */
+    height: 60vh;
+    max-height: 60vh;
 }
 
 .event-log-entry {
-    padding: 8px 16px; /* Add some padding around the text for better readability. */
+    padding: 8px;
     border-radius: 4px; /* Add rounded corners. */
     font-family: 'Courier New', monospace; /* A monospaced font often looks good for logs. */
     font-size: 14px;

frontend/src/Header.css

@@ -1,6 +1,6 @@
 .header {
     background-color: #f5f5f5;  /* A pleasant grey */
-    padding: 10px 10px;
+    padding: 15px 0 15px 20px;
     margin-bottom: 5px;
 }
 

frontend/src/HeapGrid.css

@@ -2,13 +2,13 @@
     display: grid;
     gap: 2px;
     /* Spacing between cells */
-    flex: 4;
+    flex: 4 1;
+    overflow-y: auto;
     margin: 10px 10px;
     padding: 10px;
     border: 1px solid #e0e0e0;
     background-color: #f5f5f5;
-    overflow-y: auto;
-    /* allows vertical scrolling */
+    max-height: 85vh;
 }
 
 .cell {

frontend/src/InfoBlock.css

@@ -12,6 +12,7 @@
 .info-entry {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 5px;
     width: 100%;
 }
 

frontend/src/Visualization.css

@@ -1,16 +1,26 @@
 .visualization {
     display: flex;
     flex-direction: column;
-    height: 97vh;
+    flex: 1;
 }
 
 .top-section {
     display: flex;
     flex-direction: row;
+    flex: 1;
+    position: sticky;
+    bottom: 0;
+    margin-bottom: 5px;
 }
 
 .left-panel {
     display: flex;
     flex-direction: column;
     flex: 3;
 }
+
+.extra-details {
+    flex: 1 1 33%; /* grow, shrink, base size */
+    margin-top: auto;
+    padding: 10px;
+}

frontend/src/Visualization.tsx

@@ -67,6 +67,7 @@ const Visualization: React.FC = () => {
         // Initialize WebSocket connection only once when component mounts
         const wsConnection = new WebSocket(BACKEND);
         setWs(wsConnection);
+        console.log('Established ws conn');
 
         wsConnection.onopen = () => {
             wsConnection.send(JSON.stringify({
@@ -149,6 +150,7 @@ const Visualization: React.FC = () => {
                     />
                     <Slider minValue={100} maxValue={2000} intervalRate={intervalRate} updateIntervalRate={setIntervalRate} />
                     <EventStream logs={eventLogs} highlightCells={highlightCells} clearHighlightedCells={clearHighlightedCells} />
+                    <div className='extra-details'></div>
                 </div>
                 <HeapGrid memory={memory} highlightedCells={highlightedCells} />
             </div>

frontend/src/index.css

@@ -1,13 +1,42 @@
 body {
-  margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+body, html {
+  height: 100vh;
+  margin: 0;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+nav ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+nav li {
+  display: inline;
+  margin-right: 10px;
+}
+
+nav a {
+  text-decoration: none;
+  color: blue;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}

frontend/src/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import GCVizApp from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <GCVizApp />
   </React.StrictMode>
 );
 

src/rts_cfg.rs

@@ -3,7 +3,7 @@ use serde::{Deserialize, Serialize};
 use crate::gc::GCType;
 
 static ALIGNMENT: usize = 4;
-static HEAP_SIZE: usize = 1024;
+static HEAP_SIZE: usize = 512;
 
 /// Program simulation parameters
 #[derive(Debug, Clone, Serialize, Deserialize)]