[desktop]: Use injectQueryParams from ngxtension

desktop/src/app/atlas/atlas.component.ts

@@ -1,7 +1,7 @@
-import { AfterContentInit, AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewEncapsulation, inject, viewChild } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { AfterContentInit, AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewEncapsulation, effect, inject, viewChild } from '@angular/core'
 import { Chart, ChartData, ChartOptions } from 'chart.js'
 import zoomPlugin from 'chartjs-plugin-zoom'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { UIChart } from 'primeng/chart'
 import { ListboxChangeEvent } from 'primeng/listbox'
 import { OverlayPanel } from 'primeng/overlaypanel'
@@ -56,10 +56,10 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 	private readonly app = inject(AppComponent)
 	private readonly api = inject(ApiService)
 	private readonly browserWindowService = inject(BrowserWindowService)
-	private readonly route = inject(ActivatedRoute)
 	private readonly preferenceService = inject(PreferenceService)
 	private readonly angularService = inject(AngularService)
 	private readonly deviceService = inject(DeviceService)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly sun = structuredClone(DEFAULT_SUN)
 	protected readonly moon = structuredClone(DEFAULT_MOON)
@@ -435,6 +435,14 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 		electronService.on('DATA.CHANGED', (event) => {
 			this.loadTabFromData(event)
 		})
+
+		effect(() => {
+			const data = this.data()
+
+			if (data) {
+				this.loadTabFromData(JSON.parse(data))
+			}
+		})
 	}
 
 	ngOnInit() {
@@ -459,11 +467,6 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 				this.refreshTab()
 			}
 		})
-
-		this.route.queryParams.subscribe((e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as SkyAtlasInput
-			this.loadTabFromData(data)
-		})
 	}
 
 	ngAfterViewInit() {
@@ -482,6 +485,10 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 			if (this.tab === BodyTabType.SKY_OBJECT) {
 				this.skyObject.search.filter = skyObjectSearchFilterWithDefault(data.filter, this.skyObject.search.filter)
 
+				if (this.skyObject.search.filter.rightAscension && this.skyObject.search.filter.declination && this.skyObject.search.filter.radius <= 0) {
+					this.skyObject.search.filter.radius = 4
+				}
+
 				this.tabChanged()
 				void this.searchSkyObject()
 			}

desktop/src/app/camera/camera.component.ts

@@ -1,5 +1,5 @@
-import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, viewChild } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { Component, effect, HostListener, inject, NgZone, OnDestroy, viewChild } from '@angular/core'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { CameraExposureComponent } from '../../shared/components/camera-exposure.component'
 import { MenuItemCommandEvent, SlideMenuItem } from '../../shared/components/menu-item.component'
 import { SEPARATOR_MENU_ITEM } from '../../shared/constants'
@@ -34,14 +34,14 @@ import { AppComponent } from '../app.component'
 	selector: 'neb-camera',
 	templateUrl: 'camera.component.html',
 })
-export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
+export class CameraComponent implements OnDestroy, Tickable {
 	private readonly app = inject(AppComponent)
 	private readonly api = inject(ApiService)
 	private readonly browserWindowService = inject(BrowserWindowService)
 	private readonly electronService = inject(ElectronService)
 	private readonly preferenceService = inject(PreferenceService)
-	private readonly route = inject(ActivatedRoute)
 	private readonly ticker = inject(Ticker)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly camera = structuredClone(DEFAULT_CAMERA)
 	protected calibrationModel: SlideMenuItem[] = []
@@ -344,23 +344,23 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 		})
 
 		this.snoopDevicesMenuItem.visible = this.canSnoopDevices
-	}
 
-	ngAfterContentInit() {
-		this.route.queryParams.subscribe(async (e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as unknown
+		effect(async () => {
+			const data = this.data()
 
-			if (this.app.modal) {
-				await this.loadCameraStartCaptureForDialogMode(data as CameraDialogInput)
-			} else {
-				await this.cameraChanged(data as Camera)
-			}
+			if (data) {
+				if (this.app.modal) {
+					await this.loadCameraStartCaptureForDialogMode(JSON.parse(data))
+				} else {
+					await this.cameraChanged(JSON.parse(data))
+				}
 
-			this.ticker.register(this, 30000)
+				this.ticker.register(this, 30000)
 
-			if (this.mode === 'CAPTURE') {
-				await this.loadEquipment()
-				await this.loadCalibrationGroups()
+				if (this.mode === 'CAPTURE') {
+					await this.loadEquipment()
+					await this.loadCalibrationGroups()
+				}
 			}
 		})
 	}

desktop/src/app/dustcap/dustcap.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { Component, HostListener, NgZone, OnDestroy, effect, inject } from '@angular/core'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { ApiService } from '../../shared/services/api.service'
 import { ElectronService } from '../../shared/services/electron.service'
 import { Tickable, Ticker } from '../../shared/services/ticker.service'
@@ -10,11 +10,11 @@ import { AppComponent } from '../app.component'
 	selector: 'neb-dustcap',
 	templateUrl: 'dustcap.component.html',
 })
-export class DustCapComponent implements AfterViewInit, OnDestroy, Tickable {
+export class DustCapComponent implements OnDestroy, Tickable {
 	private readonly app = inject(AppComponent)
 	private readonly api = inject(ApiService)
-	private readonly route = inject(ActivatedRoute)
 	private readonly ticker = inject(Ticker)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly dustCap = structuredClone(DEFAULT_DUST_CAP)
 
@@ -39,13 +39,14 @@ export class DustCapComponent implements AfterViewInit, OnDestroy, Tickable {
 				})
 			}
 		})
-	}
 
-	ngAfterViewInit() {
-		this.route.queryParams.subscribe(async (e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as DustCap
-			await this.dustCapChanged(data)
-			this.ticker.register(this, 30000)
+		effect(async () => {
+			const data = this.data()
+
+			if (data) {
+				await this.dustCapChanged(JSON.parse(data))
+				this.ticker.register(this, 30000)
+			}
 		})
 	}
 

desktop/src/app/filterwheel/filterwheel.component.ts

@@ -1,6 +1,6 @@
-import { AfterContentInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { Component, HostListener, NgZone, OnDestroy, effect, inject } from '@angular/core'
 import hotkeys from 'hotkeys-js'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { Subject, Subscription, debounceTime } from 'rxjs'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
@@ -17,13 +17,13 @@ import { AppComponent } from '../app.component'
 	templateUrl: 'filterwheel.component.html',
 	styleUrls: ['filterwheel.component.scss'],
 })
-export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickable {
+export class FilterWheelComponent implements OnDestroy, Tickable {
 	private readonly app = inject(AppComponent)
 	private readonly api = inject(ApiService)
 	private readonly electronService = inject(ElectronService)
 	private readonly preferenceService = inject(PreferenceService)
-	private readonly route = inject(ActivatedRoute)
 	private readonly ticker = inject(Ticker)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly wheel = structuredClone(DEFAULT_WHEEL)
 	protected readonly request = structuredClone(DEFAULT_CAMERA_START_CAPTURE)
@@ -170,29 +170,29 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickab
 			event.preventDefault()
 			void this.moveToPosition(9)
 		})
-	}
 
-	async ngAfterContentInit() {
-		this.route.queryParams.subscribe(async (e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as unknown
+		effect(async () => {
+			const data = this.data()
 
-			if (this.app.modal) {
-				await this.loadCameraStartCaptureForDialogMode(data as WheelDialogInput)
-			} else {
-				await this.wheelChanged(data as Wheel)
-			}
+			if (data) {
+				if (this.app.modal) {
+					await this.loadCameraStartCaptureForDialogMode(JSON.parse(data))
+				} else {
+					await this.wheelChanged(JSON.parse(data))
+				}
 
-			this.ticker.register(this, 30000)
-		})
+				this.ticker.register(this, 30000)
 
-		if (this.mode === 'CAPTURE') {
-			this.focusers = await this.api.focusers()
+				if (this.mode === 'CAPTURE') {
+					this.focusers = await this.api.focusers()
 
-			if (this.focusers.length === 1 && !this.focuser) {
-				this.focuser = this.focusers[0]
-				await this.focuserChanged()
+					if (this.focusers.length === 1 && !this.focuser) {
+						this.focuser = this.focusers[0]
+						await this.focuserChanged()
+					}
+				}
 			}
-		}
+		})
 	}
 
 	@HostListener('window:unload')

desktop/src/app/focuser/focuser.component.ts

@@ -1,6 +1,6 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { Component, HostListener, NgZone, OnDestroy, effect, inject } from '@angular/core'
 import hotkeys from 'hotkeys-js'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { ApiService } from '../../shared/services/api.service'
 import { ElectronService } from '../../shared/services/electron.service'
 import { PreferenceService } from '../../shared/services/preference.service'
@@ -12,12 +12,12 @@ import { AppComponent } from '../app.component'
 	selector: 'neb-focuser',
 	templateUrl: 'focuser.component.html',
 })
-export class FocuserComponent implements AfterViewInit, OnDestroy, Tickable {
+export class FocuserComponent implements OnDestroy, Tickable {
 	private readonly app = inject(AppComponent)
 	private readonly api = inject(ApiService)
 	private readonly preferenceService = inject(PreferenceService)
-	private readonly route = inject(ActivatedRoute)
 	private readonly ticker = inject(Ticker)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly focuser = structuredClone(DEFAULT_FOCUSER)
 	protected readonly preference = structuredClone(DEFAULT_FOCUSER_PREFERENCE)
@@ -97,13 +97,14 @@ export class FocuserComponent implements AfterViewInit, OnDestroy, Tickable {
 			this.preference.stepsAbsolute = Math.min(this.focuser.maxPosition, this.preference.stepsAbsolute + 1)
 			this.savePreference()
 		})
-	}
 
-	ngAfterViewInit() {
-		this.route.queryParams.subscribe(async (e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as Focuser
-			await this.focuserChanged(data)
-			this.ticker.register(this, 30000)
+		effect(async () => {
+			const data = this.data()
+
+			if (data) {
+				await this.focuserChanged(JSON.parse(data))
+				this.ticker.register(this, 30000)
+			}
 		})
 	}
 

desktop/src/app/framing/framing.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { Component, HostListener, NgZone, OnDestroy, effect, inject } from '@angular/core'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
 import { ElectronService } from '../../shared/services/electron.service'
@@ -11,12 +11,12 @@ import { AppComponent } from '../app.component'
 	selector: 'neb-framing',
 	templateUrl: 'framing.component.html',
 })
-export class FramingComponent implements AfterViewInit, OnDestroy {
-	private readonly route = inject(ActivatedRoute)
+export class FramingComponent implements OnDestroy {
 	private readonly api = inject(ApiService)
 	private readonly browserWindowService = inject(BrowserWindowService)
 	private readonly electronService = inject(ElectronService)
 	private readonly preferenceService = inject(PreferenceService)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly preference = structuredClone(DEFAULT_FRAMING_PREFERENCE)
 	protected readonly fov = structuredClone(DEFAULT_FRAMING_FOV_DIALOG)
@@ -34,21 +34,19 @@ export class FramingComponent implements AfterViewInit, OnDestroy {
 		this.electronService.on('DATA.CHANGED', (event: FramingRequest) => {
 			return ngZone.run(() => this.frameFromData(event))
 		})
-	}
 
-	async ngAfterViewInit() {
-		this.loading = true
+		effect(async () => {
+			const data = this.data()
 
-		try {
-			this.hipsSurveys = await this.api.hipsSurveys()
-		} finally {
-			this.loadPreference()
-			this.loading = false
-		}
+			try {
+				this.hipsSurveys = await this.api.hipsSurveys()
+			} finally {
+				this.loadPreference()
+			}
 
-		this.route.queryParams.subscribe((e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as FramingRequest
-			return this.frameFromData(data)
+			if (data) {
+				await this.frameFromData(JSON.parse(data))
+			}
 		})
 	}
 

desktop/src/app/image/image.component.ts

@@ -1,13 +1,12 @@
-import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, inject, viewChild } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, effect, inject, viewChild } from '@angular/core'
 import hotkeys from 'hotkeys-js'
 import { NgxLegacyMoveableComponent, OnDrag, OnResize, OnRotate } from 'ngx-moveable'
+import { injectQueryParams } from 'ngxtension/inject-query-params'
 import { ContextMenu } from 'primeng/contextmenu'
 import { DeviceListMenuComponent } from '../../shared/components/device-list-menu.component'
 import { HistogramComponent } from '../../shared/components/histogram.component'
 import { MenuItem } from '../../shared/components/menu-item.component'
 import { SEPARATOR_MENU_ITEM } from '../../shared/constants'
-import { AngularService } from '../../shared/services/angular.service'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
 import { DeviceService } from '../../shared/services/device.service'
@@ -63,13 +62,12 @@ import { AppComponent } from '../app.component'
 })
 export class ImageComponent implements AfterViewInit, OnDestroy {
 	private readonly app = inject(AppComponent)
-	private readonly route = inject(ActivatedRoute)
 	private readonly api = inject(ApiService)
 	private readonly electronService = inject(ElectronService)
 	private readonly browserWindowService = inject(BrowserWindowService)
 	private readonly preferenceService = inject(PreferenceService)
-	private readonly angularService = inject(AngularService)
 	private readonly deviceService = inject(DeviceService)
+	private readonly data = injectQueryParams('data', { transform: decodeURIComponent })
 
 	protected readonly preference = structuredClone(DEFAULT_IMAGE_PREFERENCE)
 	protected readonly solver = structuredClone(DEFAULT_IMAGE_SOLVER_DIALOG)
@@ -541,15 +539,18 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 		this.loadPreference()
 
 		this.solver.key = uid()
+
+		effect(() => {
+			const data = this.data()
+
+			if (data) {
+				void this.loadImageFromOpenImage(JSON.parse(data))
+			}
+		})
 	}
 
 	async ngAfterViewInit() {
 		await this.loadCalibrationGroups()
-
-		this.route.queryParams.subscribe((e) => {
-			const data = JSON.parse(decodeURIComponent(e['data'] as string)) as OpenImage
-			return this.loadImageFromOpenImage(data)
-		})
 	}
 
 	@HostListener('window:unload')