support shared navigation urls/etc for easier debugging and sharing

src/app/analysis/analysis.component.html

@@ -1,15 +1,16 @@
 <div role="tablist" class="tabs tabs-boxed rounded-none">
 
   <div class="tab flex flex-row justify-end">
-    <button class="btn-sm btn btn-success mr-3" (click)="analysisService.toggleAnalyzing()">Done</button>
+    <button class="btn-sm btn btn-success mr-3" (click)="analysisService.toggleAnalyzing(); exit.emit()">Done</button>
   </div>
 
 </div>
 
 <div class="flex flex-row gap-2 mb-3">
   <div class="form-column">
     <div class="form-row">
-      <app-input-analysis-report [(report)]="report" (change)="updateReport($event)"></app-input-analysis-report>
+      <app-input-analysis-report [(report)]="report" (change)="updateReport($event)"
+        [defaultValue]="defaultReport()!"></app-input-analysis-report>
     </div>
   </div>
 
@@ -18,11 +19,13 @@
   <div class="form-column">
     <div class="form-row">
       @if(reportTypeName === 'progressionsingle' || reportTypeName === 'weaponpotency') {
-      <app-input-itemclass [(itemClass)]="itemClassInput"></app-input-itemclass>
+      <app-input-itemclass [(itemClass)]="itemClassInput" (change)="changeURLProp.emit(['itemclass', $event])"
+        [defaultValue]="defaultItemclass()!"></app-input-itemclass>
       }
 
       @if(reportTypeName === 'spellpotency') {
-      <app-input-spell [(spell)]="spellNameInput"></app-input-spell>
+      <app-input-spell [(spell)]="spellNameInput" (change)="changeURLProp.emit(['spell', $event])"
+        [defaultValue]="defaultSpell()!"></app-input-spell>
       }
     </div>
   </div>
@@ -32,7 +35,7 @@
       @if(reportTypeName === 'weaponpotency') {
       <app-input-floating-label>Weapon Tier</app-input-floating-label>
       <input [(ngModel)]="tierInput" min="1" [max]="maxTier()" type="number" placeholder="Choose tier..."
-        class="form-input" />
+        class="form-input" (change)="changeURLProp.emit(['tier', tierInput().toString()])" />
       }
     </div>
   </div>

src/app/analysis/analysis.component.ts

@@ -1,4 +1,12 @@
-import { Component, computed, inject, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  OnInit,
+  output,
+  signal,
+} from '@angular/core';
 import { maxBy } from 'lodash';
 import { AnalysisReportType, ItemClassType } from '../../interfaces';
 import { AnalysisService } from '../services/analysis.service';
@@ -10,7 +18,14 @@ import { ReportModel } from '../shared/components/input-analysis-report/input-an
   templateUrl: './analysis.component.html',
   styleUrl: './analysis.component.scss',
 })
-export class AnalysisComponent {
+export class AnalysisComponent implements OnInit {
+  public exit = output();
+  public changeURLProp = output<[string, string | undefined]>();
+  public defaultReport = input<string | null>();
+  public defaultItemclass = input<string | null>();
+  public defaultSpell = input<string | null>();
+  public defaultTier = input<string | null>();
+
   public analysisService = inject(AnalysisService);
   public modService = inject(ModService);
 
@@ -24,7 +39,7 @@ export class AnalysisComponent {
     return maxBy(this.modService.mod().items, 'tier')?.tier ?? 1;
   });
 
-  public report = signal<ReportModel | undefined>(undefined);
+  public report = signal<string | undefined>(undefined);
   public reportData = computed(() => {
     const reportType = this.reportType();
     const reportArgs = this.reportDataArgs();
@@ -89,70 +104,19 @@ export class AnalysisComponent {
     }
   });
 
+  ngOnInit() {
+    const tier = this.defaultTier();
+    if (tier) {
+      this.tierInput.set(+tier);
+    }
+  }
+
   public updateReport($event: ReportModel | undefined) {
     if (!$event) return;
 
     this.reportType.set($event.type);
     this.reportDataArgs.set($event.data);
 
-    /*
-    let report: AnalysisReport | undefined = undefined;
-
-    switch ($event.type) {
-      case AnalysisReportType.ArmorAverage: {
-        report = this.analysisService.generateArmorReport(
-          $event.data.itemClasses ?? []
-        );
-        break;
-      }
-
-      case AnalysisReportType.GemStats: {
-        report = this.analysisService.generateGemReport();
-        break;
-      }
-
-      case AnalysisReportType.StatUtilization: {
-        report = this.analysisService.generateStatUtilizationReport();
-        break;
-      }
-
-      case AnalysisReportType.SpellPotency: {
-        report = this.analysisService.generateSpellPotencyReport(
-          $event.data.spellName ?? ''
-        );
-        break;
-      }
-
-      case AnalysisReportType.WeaponPotency: {
-        report = this.analysisService.generateWeaponPotencyReport(
-          $event.data.itemClass,
-          5
-        );
-        break;
-      }
-
-      case AnalysisReportType.TraitUsage: {
-        report = this.analysisService.generateTraitReport();
-        break;
-      }
-
-      TODO: this one should support an array of item classes (default) OR a singular item picker
-      case AnalysisReportType.Progression: {
-        report = this.analysisService.generateProgressionReport(
-          $event.data.itemClasses ?? []
-        );
-        break;
-      }
-
-      case AnalysisReportType.WeaponAverage: {
-        report = this.analysisService.generateWeaponReport(
-          $event.data.itemClasses ?? []
-        );
-        break;
-      }
-    }
-
-    this.reportData.set(report);
-    */
+    this.changeURLProp.emit(['report', $event.value]);
   }
 }

src/app/home/home.component.html

@@ -74,7 +74,7 @@
   <div class="root-content p-3">
     <div class="card bg-base-100 w-full shadow-xl">
       <div class="card-body">
-        <app-validation (exit)="isValidating.set(false)"></app-validation>
+        <app-validation (exit)="resetSub(); isValidating.set(false)"></app-validation>
       </div>
     </div>
   </div>
@@ -85,7 +85,10 @@
   <div class="root-content p-3">
     <div class="card bg-base-100 w-full shadow-xl">
       <div class="card-body">
-        <app-pinpoint></app-pinpoint>
+        <app-pinpoint (exit)="resetSub()" (changeURLProp)="updateSubURLProp($event[0], $event[1])"
+          [defaultTab]="getURLSubProp('pptab')" [defaultMap]="getURLSubProp('map')"
+          [defaultItem]="getURLSubProp('item')" [defaultNPC]="getURLSubProp('npc')"
+          [defaultSTEM]="getURLSubProp('stem')"></app-pinpoint>
       </div>
     </div>
   </div>
@@ -96,7 +99,9 @@
   <div class="root-content p-3">
     <div class="card bg-base-100 w-full shadow-xl">
       <div class="card-body">
-        <app-analysis></app-analysis>
+        <app-analysis (exit)="resetSub()" (changeURLProp)="updateSubURLProp($event[0], $event[1])"
+          [defaultReport]="getURLSubProp('report')" [defaultItemclass]="getURLSubProp('itemclass')"
+          [defaultSpell]="getURLSubProp('spell')" [defaultTier]="getURLSubProp('tier')"></app-analysis>
       </div>
     </div>
   </div>
@@ -107,7 +112,7 @@
   <div class="root-content p-3">
     <div class="card bg-base-100 w-full shadow-xl">
       <div class="card-body">
-        <app-query></app-query>
+        <app-query (exit)="resetSub()"></app-query>
       </div>
     </div>
   </div>

src/app/home/home.component.ts

@@ -3,10 +3,13 @@ import {
   computed,
   ElementRef,
   inject,
+  OnInit,
   signal,
   viewChild,
 } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { SwalComponent } from '@sweetalert2/ngx-sweetalert2';
+import { isUndefined } from 'lodash';
 import { LocalStorageService } from 'ngx-webstorage';
 import { numErrorsForMod, validationMessagesForMod } from '../helpers';
 import { formatMod } from '../helpers/exporter';
@@ -22,7 +25,10 @@ import { QueryService } from '../services/query.service';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
   private localStorage = inject(LocalStorageService);
   public pinpointService = inject(PinpointService);
   public analysisService = inject(AnalysisService);
@@ -98,15 +104,44 @@ export class HomeComponent {
     },
   ];
 
-  constructor() {
+  constructor() {}
+
+  ngOnInit() {
     const lastTab = (this.localStorage.retrieve('lasttab') as number) ?? 0;
-    this.activeTab.set(lastTab);
+    const lastTabUrl = this.route.snapshot.queryParamMap.get('tab');
+
+    this.activeTab.set(lastTabUrl ? +lastTabUrl : lastTab);
+
+    const lastSub = this.route.snapshot.queryParamMap.get('sub');
+    switch (lastSub) {
+      case 'validate': {
+        return this.toggleModValidation();
+      }
+      case 'pinpoint': {
+        return this.togglePinpointing();
+      }
+      case 'analyze': {
+        return this.toggleAnalyzing();
+      }
+      case 'query': {
+        return this.toggleQuerying();
+      }
+    }
   }
 
   changeTab(newTab: number) {
     this.activeTab.set(newTab);
 
     this.localStorage.store('lasttab', newTab);
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        tab: newTab,
+        sub: '',
+      },
+    });
   }
 
   closeMenu() {
@@ -151,27 +186,59 @@ export class HomeComponent {
     this.pinpointService.togglePinpointing(false);
     this.analysisService.toggleAnalyzing(false);
     this.queryService.toggleQuerying(false);
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        sub: 'validate',
+      },
+    });
   }
 
   togglePinpointing() {
     this.pinpointService.togglePinpointing(true);
     this.isValidating.set(false);
     this.analysisService.toggleAnalyzing(false);
     this.queryService.toggleQuerying(false);
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        sub: 'pinpoint',
+      },
+    });
   }
 
   toggleAnalyzing() {
     this.analysisService.toggleAnalyzing(true);
     this.isValidating.set(false);
     this.pinpointService.togglePinpointing(false);
     this.queryService.toggleQuerying(false);
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        sub: 'analyze',
+      },
+    });
   }
 
   toggleQuerying() {
     this.queryService.toggleQuerying(true);
     this.isValidating.set(false);
     this.pinpointService.togglePinpointing(false);
     this.analysisService.toggleAnalyzing(false);
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        sub: 'query',
+      },
+    });
   }
 
   toggleTester() {
@@ -186,4 +253,29 @@ export class HomeComponent {
 
     void this.electronService.reloadExternalWebMod();
   }
+
+  getURLSubProp(prop: string): string | null {
+    return this.route.snapshot.queryParamMap.get(prop);
+  }
+
+  updateSubURLProp(prop: string, value: string | number | undefined) {
+    if (isUndefined(value)) return;
+
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParamsHandling: 'merge',
+      queryParams: {
+        [prop]: value,
+      },
+    });
+  }
+
+  resetSub() {
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {
+        tab: this.activeTab(),
+      },
+    });
+  }
 }