Revamp logs tab UI

.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;
+ }
+}