revamp logs tab UI (#4224)

.vscode/settings.json

@@ -2,16 +2,22 @@
 	"eslint.validate": ["javascript", "typescript"],
 	"eslint.nodePath": "./node_modules",
 	"eslint.workingDirectories": ["."],
-	"files.associations": {
-		"*.js": "javascript",
-		"*.ts": "typescript"
+	"[javascript]": {
+		"editor.codeActionsOnSave": {
+            "source.fixAll.eslint": "always"
+		}
+	},
+	"[javascriptreact]": {
+		"editor.codeActionsOnSave": {
+            "source.fixAll.eslint": "always"
+		}
 	},
 	"[typescript]": {
 		"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "always"
 		}
 	},
-	"[javascript]": {
+	"[typescriptreact]": {
 		"editor.codeActionsOnSave": {
             "source.fixAll.eslint": "always"
 		}
@@ -26,10 +32,6 @@
             "source.fixAll.eslint": "always"
         }
 	},
-    "[json]": {
-		"editor.formatOnSave": true,
-	},
-	"json.format.enable": true,
     "json.schemas": [
         {
             "fileMatch": [

sim/core/pet.go

@@ -164,8 +164,8 @@ func (pet *Pet) Enable(sim *Simulation, petAgent PetAgent) {
 	}
 
 	if sim.Log != nil {
-		pet.Log(sim, "Pet stats: %s", pet.GetStats())
-		pet.Log(sim, "Pet inherited stats: %s", pet.ApplyStatDependencies(pet.inheritedStats))
+		pet.Log(sim, "Pet stats: %s", pet.GetStats().FlatString())
+		pet.Log(sim, "Pet inherited stats: %s", pet.ApplyStatDependencies(pet.inheritedStats).FlatString())
 		pet.Log(sim, "Pet summoned")
 	}
 
@@ -256,7 +256,7 @@ func (pet *Pet) Disable(sim *Simulation) {
 
 	if sim.Log != nil {
 		pet.Log(sim, "Pet dismissed")
-		pet.Log(sim, pet.GetStats().String())
+		pet.Log(sim, pet.GetStats().FlatString())
 	}
 }
 

sim/core/sim.go

@@ -364,11 +364,6 @@ var (
 // Reset will set sim back and erase all current state.
 // This is automatically called before every 'Run'.
 func (sim *Simulation) reset() {
-	if sim.Log != nil {
-		sim.Log("SIM RESET")
-		sim.Log("----------------------")
-	}
-
 	if sim.Encounter.DurationIsEstimate && sim.CurrentTime != 0 {
 		sim.BaseDuration = sim.CurrentTime
 		sim.Encounter.DurationIsEstimate = false

ui/core/components/boolean_picker.ts

@@ -1,12 +1,11 @@
-import { EventID, TypedEvent } from '../typed_event.js';
-
+import { TypedEvent } from '../typed_event.js';
 import { Input, InputConfig } from './input.js';
 
 /**
  * Data for creating a boolean picker (checkbox).
  */
 export interface BooleanPickerConfig<ModObject> extends InputConfig<ModObject, boolean> {
-	cssScheme?: string;
+	reverse?: boolean;
 }
 
 // UI element for picking an arbitrary number field.
@@ -21,11 +20,16 @@ export class BooleanPicker<ModObject> extends Input<ModObject, boolean> {
 		this.inputElem = document.createElement('input');
 		this.inputElem.type = 'checkbox';
 		this.inputElem.classList.add('boolean-picker-input', 'form-check-input');
-		this.rootElem.appendChild(this.inputElem);
+
+		if (config.reverse) {
+			this.rootElem.prepend(this.inputElem);
+		} else {
+			this.rootElem.appendChild(this.inputElem);
+		}
 
 		this.init();
 
-		this.inputElem.addEventListener('change', event => {
+		this.inputElem.addEventListener('change', () => {
 			this.inputChanged(TypedEvent.nextEventID());
 		});
 	}

ui/core/components/detailed_results/log_runner.tsx

@@ -0,0 +1,79 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { element, fragment } from 'tsx-vanilla';
+
+import { SimLog } from '../../proto_utils/logs_parser.js';
+import { TypedEvent } from '../../typed_event.js';
+import { BooleanPicker } from '../boolean_picker.js';
+import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';
+
+export class LogRunner extends ResultComponent {
+	private logsContainer: HTMLElement;
+
+	private showDebug = false;
+
+	readonly showDebugChangeEmitter = new TypedEvent<void>('Show Debug');
+
+	constructor(config: ResultComponentConfig) {
+		config.rootCssClass = 'log-runner-root';
+		super(config)
+
+		this.rootElem.appendChild(
+			<>
+				<div className="show-debug-container"></div>
+				<table className="metrics-table log-runner-table">
+					<thead>
+						<tr className="metrics-table-header-row">
+							<th>Time</th>
+							<th>
+								<div className="d-flex align-items-end">Event</div>
+							</th>
+						</tr>
+					</thead>
+					<tbody className="log-runner-logs"></tbody>
+				</table>
+			</>
+		)
+		this.logsContainer = this.rootElem.querySelector('.log-runner-logs')!;
+
+		new BooleanPicker<LogRunner>(this.rootElem.querySelector('.show-debug-container')!, this, {
+			extraCssClasses: ['show-debug-picker'],
+			label: 'Show Debug Statements',
+			inline: true,
+			reverse: true,
+			changedEvent: () => this.showDebugChangeEmitter,
+			getValue: () => this.showDebug,
+			setValue: (eventID, _logRunner, newValue) => {
+				this.showDebug = newValue;
+				this.showDebugChangeEmitter.emit(eventID);
+			}
+		});
+
+		this.showDebugChangeEmitter.on(() => this.onSimResult(this.getLastSimResult()));
+	}
+
+	onSimResult(resultData: SimResultData): void {
+		const logs = resultData.result.logs
+		this.logsContainer.innerHTML = '';
+		logs.
+			filter(log => !log.isCastCompleted()).
+			forEach(log => {
+				const lineElem = document.createElement('span');
+				lineElem.textContent = log.toString();
+				if (log.raw.length > 0 && (this.showDebug || !log.raw.match(/.*\[DEBUG\].*/))) {
+					this.logsContainer.appendChild(
+						<tr>
+							<td className="log-timestamp">{log.formattedTimestamp()}</td>
+							<td className="log-event">{this.newEventFrom(log)}</td>
+						</tr>
+					);
+				}
+			});
+	}
+
+	private newEventFrom(log: SimLog): Element {
+		const eventString = log.toString(false).trim();
+		const wrapper = <span></span>;
+		wrapper.innerHTML = eventString;
+		return wrapper;
+	}
+}