feat: add stats collection and visualization (#85)

* Add initial stats recollection

* wip stats ui

* mock stats ui

* Add some stats actions and show them

* Finished superescalar tab

* Fix stats reset on machine reset

* fixes

* wip show batch execution stats

* fix

* remove polyfill and updated yarn

* finished show batch execution stats

* Add download button

* minor fixes

* better batch stats export

* added stats to VLIW and fixes

* i18n and style

* "fix" the VLIW batch execution

* fix(stats): type StatsTabComponent, integrate yarn, minor fixes

* changed react-echarts to echarts-for-react

* "use strict";

* misspells and names fixes, style and minor fixes

---------

Co-authored-by: Óscar Carrasco <[email protected]>

Author: endes0

.yarn/releases/yarn-4.0.2.cjs renamed to .yarn/releases/yarn-4.1.0.cjs

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "8.52.0-sdk",
+  "version": "8.57.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs",
   "bin": {

.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript",
-  "version": "5.2.2-sdk",
+  "version": "5.3.3-sdk",
   "main": "./lib/typescript.js",
   "type": "commonjs",
   "bin": {

.yarn/sdks/typescript/package.json

@@ -1 +1 @@
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

.yarnrc.yml

@@ -12,6 +12,6 @@
         <p>JavaScript is required to run this application.</p>
     </noscript>
     <div id="app"></div>
-    <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
+    
     <script type="module" src="/src/main.tsx"></script>
 </html>

index.html

@@ -3,6 +3,7 @@
   "version": "2.2.0",
   "description": "Educational superescalar and VLIW simulator",
   "type": "module",
+  "packageManager": "[email protected]",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -31,6 +32,8 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "bootstrap": "^5.1.3",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
     "i18next": "^22.4.14",
     "i18next-browser-languagedetector": "7.1.0",
     "i18next-http-backend": "^2.2.0",
@@ -73,6 +76,5 @@
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vitest": "^0.34.6"
-  },
-  "packageManager": "[email protected]"
+  }
 }

package.json

@@ -5,7 +5,8 @@
             "load": "Load",
             "downloadMemory": "Download Memory(JSON)",
             "downloadContent": "Download content Memory - Registers",
-            "downloadCode": "Download Code"
+            "downloadCode": "Download Code",
+            "downloadStats": "Download stats events(JSON)"
         },
         "view": {
             "name": "View",
@@ -41,6 +42,7 @@
         "speed": "Speed",
         "superescalar": "Superescalar",
         "memReg": "Memory - Registers",
+        "stats": "Stats",
         "vliw": "VLIW"
     },
     "authorModal": {
@@ -150,12 +152,9 @@
         "cacheFailLatency": "Cache miss latency"
     },
     "batchResults": {
-        "title": "Batch Results",
-        "replications": "Replications",
-        "average": "Average cycles per execution",
-        "standardDeviation": "Standard Deviation",
-        "worst": "Worst case",
-        "best": "Best case"
+        "title": "Batch Execution done",
+        "subtext": "Go to the stats tab to see the results",
+        "download": "Download stats events(JSON)"
     },
     "landingPage": {
         "pagetitle": "SIMDEWeb",
@@ -196,5 +195,45 @@
         "FloatMult": "xFloat",
         "Memory": "Memory",
         "Jump": "Jump"
+    },
+
+    "stats": {
+        "toolbox": {
+            "dataView": "Data View",
+            "close": "Close",
+            "refresh": "Refresh"
+        },
+        "units": {
+            "prefetch": "Prefetch",
+            "decode": "Decoder",
+            "rob": "ROB",
+            "fu0": "Integer + FU",
+            "fu1": "Integer x FU",
+            "fu2": "Float + FU",
+            "fu3": "Float x FU",
+            "fu4": "Memory FU",
+            "fu5": "Jump FU",
+            "rs0": "Integer + RS",
+            "rs1": "Integer x RS",
+            "rs2": "Float + RS",
+            "rs3": "Float x RS",
+            "rs4": "Memory RS",
+            "rs5": "Jump RS"
+        },
+        "statuses": {
+            "prefetchNumber": "Prefetching",
+            "decodeNumber": "Decoding",
+            "issueNumber": "Issuing",
+            "executeNumber": "Executing",
+            "writeBackNumber": "On Write Back",
+            "commitNumber": "Commiting"
+        },
+        "unitsUsage": "Units usage per cycle",
+        "instrStatuses": "Instructions statuses per cycle",
+        "cycles": "Cycles per iteration",
+        "commitDiscard": "Commited vs Discarded instructions",
+        "commited": "Commited",
+        "discarded": "Discarded",
+        "statusAverage": "Per instruction status average cycles"
     }
 }

public/locales/en/common.json

@@ -5,7 +5,8 @@
             "load": "Cargar",
             "downloadMemory": "Descargar memoria(JSON)",
             "downloadContent": "Descargar contenido Memoria - Registros",
-            "downloadCode": "Descargar código"
+            "downloadCode": "Descargar código",
+            "downloadStats": "Descargar eventos estadísticos(JSON)"
         },
         "view": {
             "name": "Ver",
@@ -41,6 +42,7 @@
         "speed": "Velocidad",
         "superescalar": "Superescalar",
         "memReg": "Memoria - Registros",
+        "stats": "Estadísticas",
         "vliw": "VLIW"
     },
     "authorModal": {
@@ -149,12 +151,9 @@
         "cacheFailLatency": "Latencia en fallos de cachés"
     },
     "batchResults": {
-        "title": "Resultados de la ejecución por lotes",
-        "replications": "Réplicas",
-        "average": "Número medio de ciclos por ejecución",
-        "standardDeviation": "Desviación éstandar",
-        "worst": "Peor caso",
-        "best": "Mejor caso"
+        "title": "Ejecución por lotes realizada",
+        "subtext": "Dirijase a la pestaña de estadísticas para ver los resultados",
+        "download": "Descargar eventos estadísticos(JSON)"
     },
     "landingPage": {
         "pagetitle": "SIMDEWeb",
@@ -194,5 +193,45 @@
         "FloatMult": "xFlotante",
         "Memory": "Memoria",
         "Jump": "Salto"
+    },
+
+    "stats": {
+        "toolbox": {
+            "dataView": "Ver datos",
+            "close": "Cerrar",
+            "refresh": "Recargar"
+        },
+        "units": {
+            "prefetch": "Prefetch",
+            "decode": "Decoder",
+            "rob": "ROB",
+            "fu0": "UF + Entera",
+            "fu1": "UF x Entera",
+            "fu2": "UF + Flotante",
+            "fu3": "UF x Flotante",
+            "fu4": "UF Memoria",
+            "fu5": "UF Salto",
+            "rs0": "ER + Entera",
+            "rs1": "ER x Entera",
+            "rs2": "ER + Flotante",
+            "rs3": "ER x Flotante",
+            "rs4": "ER Memoria",
+            "rs5": "ER Salto"
+        },
+        "statuses": {
+            "prefetchNumber": "En Prefetching",
+            "decodeNumber": "En decodificación",
+            "issueNumber": "En emisión",
+            "executeNumber": "En ejecución",
+            "writeBackNumber": "En escritura",
+            "commitNumber": "En commit"
+        },
+        "unitsUsage": "Ocupación de cada unidad por ciclo",
+        "instrStatuses": "Instrucciones en cada etapa por ciclo",
+        "cycles": "Ciclos por replica",
+        "commitDiscard": "Instrucciones commiteadas VS descartadas",
+        "commited": "Commiteada",
+        "discarded": "Descartada",
+        "statusAverage": "Media de ciclos de cada etapa por instrucción"
     }
 }

public/locales/es/common.json

@@ -25,7 +25,7 @@ export const FUNCTIONALUNITTYPESQUANTITY =
 export interface FunctionalUntitVisualEntry {
   id: number;
   value: string;
-  uuid: number;
+  uid: number;
 }
 
 const FunctionalUnitLantencies: Record<FunctionalUnitType, number> = {
@@ -74,6 +74,10 @@ export class FunctionalUnit {
     return this._latency;
   }
 
+  public get usage(): number {
+    return this._instructions.length / this._latency;
+  }
+
   constructor(
     private _type: FunctionalUnitType,
     private _latency: number = FunctionalUnitLantencies[_type]
@@ -129,10 +133,10 @@ export class FunctionalUnit {
     return this._stalled > 0;
   }
 
-  public getReadyInstructionUuid(): number {
+  public getReadyInstructionUid(): number {
     return this._instructions.length > 0 &&
       this._instructions[0].blankTimeUnitsAhead == 0
-      ? this._instructions[0].instruction.uuid
+      ? this._instructions[0].instruction.uid
       : -1;
   }
 
@@ -241,12 +245,12 @@ export class FunctionalUnit {
         list.push({
           id: this._instructions[j].instruction.id,
           value: this._instructions[j].instruction.toString(),
-          uuid: this._instructions[j].instruction.uuid,
+          uid: this._instructions[j].instruction.uid,
         });
         j++;
         lastPos = i + 1;
       } else {
-        list.push({ id: -1, value: "", uuid: -1 });
+        list.push({ id: -1, value: "", uid: -1 });
       }
     }
 

src/core/Common/FunctionalUnit.ts

@@ -11,8 +11,8 @@ export class Instruction {
   protected _label: string;
   protected _breakPoint: boolean = false;
 
-  public get uuid(): number {
-    return this._uuid;
+  public get uid(): number {
+    return this._uid;
   }
 
   public get breakPoint(): boolean {
@@ -35,7 +35,7 @@ export class Instruction {
     return this._operandsString;
   }
 
-  constructor(from?: Instruction, protected _uuid?: number) {
+  constructor(from?: Instruction, protected _uid?: number) {
     if (from) {
       this.id = from.id;
       this.basicBlock = from.basicBlock;