Skip to content

Commit

Permalink
[desktop]: Migrate to viewChild signal
Browse files Browse the repository at this point in the history
  • Loading branch information
tiagohm committed Dec 8, 2024
1 parent f72a347 commit 692dbb4
Show file tree
Hide file tree
Showing 13 changed files with 82 additions and 111 deletions.
11 changes: 5 additions & 6 deletions desktop/src/app/alignment/alignment.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject, viewChild } from '@angular/core'
import { CameraExposureComponent } from '../../shared/components/camera-exposure.component'
import { ApiService } from '../../shared/services/api.service'
import { BrowserWindowService } from '../../shared/services/browser-window.service'
Expand Down Expand Up @@ -43,8 +43,7 @@ export class AlignmentComponent implements AfterViewInit, OnDestroy, Tickable {
protected darvRequest = this.preference.darvRequest
protected readonly darvResult = structuredClone(DEFAULT_DARV_RESULT)

@ViewChild('cameraExposure')
private readonly cameraExposure!: CameraExposureComponent
private readonly cameraExposure = viewChild.required<CameraExposureComponent>('cameraExposure')

get pausingOrPaused() {
return this.status === 'PAUSING' || this.status === 'PAUSED'
Expand Down Expand Up @@ -170,7 +169,7 @@ export class AlignmentComponent implements AfterViewInit, OnDestroy, Tickable {
this.tppaResult.altitudeErrorDirection = event.altitudeErrorDirection
this.tppaResult.totalError = event.totalError
} else if (event.state === 'FINISHED') {
this.cameraExposure.reset()
this.cameraExposure().reset()
} else if (event.state === 'SOLVED' || event.state === 'SLEWED') {
this.tppaResult.failed = false
this.tppaResult.rightAscension = event.rightAscension
Expand All @@ -180,7 +179,7 @@ export class AlignmentComponent implements AfterViewInit, OnDestroy, Tickable {
}

if (event.capture.state !== 'CAPTURE_FINISHED') {
this.cameraExposure.handleCameraCaptureEvent(event.capture, true)
this.cameraExposure().handleCameraCaptureEvent(event.capture, true)
}
})
}
Expand All @@ -190,7 +189,7 @@ export class AlignmentComponent implements AfterViewInit, OnDestroy, Tickable {
if (event.camera.id === this.camera?.id) {
ngZone.run(() => {
this.status = event.state
this.running = this.cameraExposure.handleCameraCaptureEvent(event.capture)
this.running = this.cameraExposure().handleCameraCaptureEvent(event.capture)

if (event.state === 'FORWARD' || event.state === 'BACKWARD') {
this.darvResult.direction = event.direction
Expand Down
27 changes: 10 additions & 17 deletions desktop/src/app/atlas/atlas.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterContentInit, AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'
import { AfterContentInit, AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewEncapsulation, inject, viewChild } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { Chart, ChartData, ChartOptions } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom'
Expand Down Expand Up @@ -346,17 +346,10 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
},
]

@ViewChild('deviceMenu')
private readonly deviceMenu!: DeviceListMenuComponent

@ViewChild('dateTimeAndLocationPanel')
private readonly dateTimeAndLocationPanel!: OverlayPanel

@ViewChild('favoritesPanel')
private readonly favoritesPanel!: OverlayPanel

@ViewChild('chart')
private readonly chart!: UIChart
private readonly deviceMenu = viewChild.required<DeviceListMenuComponent>('deviceMenu')
private readonly dateTimeAndLocationPanel = viewChild.required<OverlayPanel>('dateTimeAndLocationPanel')
private readonly favoritesPanel = viewChild.required<OverlayPanel>('favoritesPanel')
private readonly chart = viewChild.required<UIChart>('chart')

get body() {
switch (this.tab) {
Expand Down Expand Up @@ -409,15 +402,15 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
icon: 'mdi mdi-bookmark',
tooltip: 'Favorites',
command: (e) => {
this.favoritesPanel.toggle(e.originalEvent)
this.favoritesPanel().toggle(e.originalEvent)
},
})

this.app.topMenu.push({
icon: 'mdi mdi-calendar',
tooltip: 'Date Time and Location',
command: (e) => {
this.dateTimeAndLocationPanel.toggle(e.originalEvent)
this.dateTimeAndLocationPanel().toggle(e.originalEvent)
},
})

Expand Down Expand Up @@ -858,7 +851,7 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
[24.0, 90],
]

this.chart.refresh()
this.chart().refresh()
}

private async refreshChart(force: boolean = false) {
Expand Down Expand Up @@ -908,7 +901,7 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
}
} finally {
this.updateAltitudeChart()
this.chart.refresh()
this.chart().refresh()
}
}

Expand Down Expand Up @@ -978,6 +971,6 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,

private async executeMount(action: (mount: Mount) => void | Promise<void>, showConfirmation: boolean = true) {
const mounts = await this.api.mounts()
return this.deviceService.executeAction(this.deviceMenu, mounts, action, showConfirmation)
return this.deviceService.executeAction(this.deviceMenu(), mounts, action, showConfirmation)
}
}
15 changes: 6 additions & 9 deletions desktop/src/app/autofocus/autofocus.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject, viewChild } from '@angular/core'
import { ChartData, ChartOptions } from 'chart.js'
import { Point } from 'electron'
import { UIChart } from 'primeng/chart'
Expand Down Expand Up @@ -205,11 +205,8 @@ export class AutoFocusComponent implements AfterViewInit, OnDestroy, Tickable {
],
}

@ViewChild('cameraExposure')
private readonly cameraExposure!: CameraExposureComponent

@ViewChild('chart')
private readonly chart!: UIChart
private readonly cameraExposure = viewChild.required<CameraExposureComponent>('cameraExposure')
private readonly chart = viewChild.required<UIChart>('chart')

private get trendLineLeftDataset() {
return this.chartData.datasets[0]
Expand Down Expand Up @@ -314,7 +311,7 @@ export class AutoFocusComponent implements AfterViewInit, OnDestroy, Tickable {
this.starHFD = event.starHFD

if (event.capture) {
this.cameraExposure.handleCameraCaptureEvent(event.capture, true)
this.cameraExposure().handleCameraCaptureEvent(event.capture, true)
}

if (state === 'CURVE_FITTED') {
Expand Down Expand Up @@ -440,7 +437,7 @@ export class AutoFocusComponent implements AfterViewInit, OnDestroy, Tickable {
zoom.limits!['x']!.max = scales['x']!.max
zoom.limits!['y']!.max = scales['y']!.max

this.chart.refresh()
this.chart().refresh()
}

private clearChart() {
Expand All @@ -450,7 +447,7 @@ export class AutoFocusComponent implements AfterViewInit, OnDestroy, Tickable {
dataset.data = []
}

this.chart.refresh()
this.chart().refresh()
}

private loadPreference() {
Expand Down
2 changes: 2 additions & 0 deletions desktop/src/app/calibration/calibration.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@
<neb-button
label="Files"
icon="mdi mdi-file-plus"
severity="success"
(action)="openFilesToUpload(key)" />
<neb-button
label="Directory"
icon="mdi mdi-folder-plus"
severity="success"
(action)="openDirectoryToUpload(key)" />
</div>
<span class="text-sm text-gray-500">{{ this.frames.get(key)?.length ?? 0 }} frames</span>
Expand Down
7 changes: 3 additions & 4 deletions desktop/src/app/calibration/calibration.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, HostListener, OnDestroy, QueryList, ViewChildren, ViewEncapsulation, inject } from '@angular/core'
import { AfterViewInit, Component, HostListener, OnDestroy, ViewEncapsulation, inject, viewChildren } from '@angular/core'
import { Listbox } from 'primeng/listbox'
import { MenuItem } from '../../shared/components/menu-item.component'
import { SEPARATOR_MENU_ITEM } from '../../shared/constants'
Expand Down Expand Up @@ -135,8 +135,7 @@ export class CalibrationComponent implements AfterViewInit, OnDestroy {
},
]

@ViewChildren('frameListBox')
private readonly frameListBoxes!: QueryList<Listbox>
private readonly frameListBoxes = viewChildren<Listbox>('frameListBox')

get groups() {
return Array.from(this.frames.keys()).sort(textComparator)
Expand Down Expand Up @@ -403,7 +402,7 @@ export class CalibrationComponent implements AfterViewInit, OnDestroy {
}

private markFrameListBoxesForCheck() {
for (const box of this.frameListBoxes) {
for (const box of this.frameListBoxes()) {
box.cd.markForCheck()
}
}
Expand Down
9 changes: 4 additions & 5 deletions desktop/src/app/camera/camera.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, ViewChild } from '@angular/core'
import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, viewChild } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { CameraExposureComponent } from '../../shared/components/camera-exposure.component'
import { MenuItemCommandEvent, SlideMenuItem } from '../../shared/components/menu-item.component'
Expand Down Expand Up @@ -123,11 +123,10 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
format: this.request.namingFormat,
}

@ViewChild('cameraExposure')
private readonly cameraExposure?: CameraExposureComponent
private readonly cameraExposure = viewChild<CameraExposureComponent>('cameraExposure')

get status() {
return this.cameraExposure?.currentState ?? 'IDLE'
return this.cameraExposure()?.currentState ?? 'IDLE'
}

get pausingOrPaused() {
Expand Down Expand Up @@ -219,7 +218,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
this.electronService.on('CAMERA.CAPTURE_ELAPSED', (event) => {
if (event.camera.id === this.camera.id) {
ngZone.run(() => {
this.running = this.cameraExposure?.handleCameraCaptureEvent(event) ?? false
this.running = this.cameraExposure()?.handleCameraCaptureEvent(event) ?? false
})
}
})
Expand Down
10 changes: 4 additions & 6 deletions desktop/src/app/flat-wizard/flat-wizard.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject, viewChild } from '@angular/core'
import { CameraExposureComponent } from '../../shared/components/camera-exposure.component'
import { AngularService } from '../../shared/services/angular.service'
import { ApiService } from '../../shared/services/api.service'
Expand Down Expand Up @@ -34,11 +34,9 @@ export class FlatWizardComponent implements AfterViewInit, OnDestroy, Tickable {
protected request = this.preference.request

protected filters: Filter[] = []

protected running = false

@ViewChild('cameraExposure')
private readonly cameraExposure!: CameraExposureComponent
private readonly cameraExposure = viewChild.required<CameraExposureComponent>('cameraExposure')

get meanTargetMin() {
return Math.floor(this.request.meanTarget - (this.request.meanTolerance * this.request.meanTarget) / 100)
Expand All @@ -59,10 +57,10 @@ export class FlatWizardComponent implements AfterViewInit, OnDestroy, Tickable {
ngZone.run(() => {
if (event.state === 'EXPOSURING' && event.capture && event.camera.id === this.camera?.id) {
this.running = true
this.cameraExposure.handleCameraCaptureEvent(event.capture, true)
this.cameraExposure().handleCameraCaptureEvent(event.capture, true)
} else {
this.running = false
this.cameraExposure.reset()
this.cameraExposure().reset()

if (event.state === 'CAPTURED') {
this.angularService.message('Flat frame captured')
Expand Down
8 changes: 3 additions & 5 deletions desktop/src/app/guider/guider.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'
import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, inject, viewChild } from '@angular/core'
import { Chart, ChartData, ChartOptions } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom'
import { UIChart } from 'primeng/chart'
Expand Down Expand Up @@ -26,9 +26,7 @@ export class GuiderComponent implements OnInit, AfterViewInit, OnDestroy, Tickab
protected readonly chartInfo = structuredClone(DEFAULT_GUIDER_CHART_INFO)

private readonly guideHistory: GuiderHistoryStep[] = []

@ViewChild('chart')
private readonly chart!: UIChart
private readonly chart = viewChild.required<UIChart>('chart')

get stopped() {
return this.guider.state === 'STOPPED'
Expand Down Expand Up @@ -351,7 +349,7 @@ export class GuiderComponent implements OnInit, AfterViewInit, OnDestroy, Tickab
this.chartData.datasets[2].data = this.guideHistory.map((e) => (e.guideStep?.raDuration ?? 0) / durationScale(e.guideStep?.raDirection))
this.chartData.datasets[3].data = this.guideHistory.map((e) => (e.guideStep?.decDuration ?? 0) / durationScale(e.guideStep?.decDirection))

this.chart.refresh()
this.chart().refresh()
}

protected async guideOutputChanged() {
Expand Down
9 changes: 4 additions & 5 deletions desktop/src/app/home/home.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AfterContentInit, Component, inject, NgZone, ViewChild, ViewEncapsulation } from '@angular/core'
import { AfterContentInit, Component, inject, NgZone, viewChild, ViewEncapsulation } from '@angular/core'
import packageJson from '../../../package.json' with { type: 'json' }
import { DeviceChooserComponent } from '../../shared/components/device-chooser.component'
import { DeviceConnectionCommandEvent, DeviceListMenuComponent } from '../../shared/components/device-list-menu.component'
Expand Down Expand Up @@ -81,8 +81,7 @@ export class HomeComponent implements AfterContentInit {
}
}

@ViewChild('deviceMenu')
private readonly deviceMenu!: DeviceListMenuComponent
private readonly deviceMenu = viewChild.required<DeviceListMenuComponent>('deviceMenu')

get connected() {
return !!this.connection && this.connection.connected
Expand Down Expand Up @@ -514,7 +513,7 @@ export class HomeComponent implements AfterContentInit {

if (devices.length === 0) return

const device = await this.deviceMenu.show(devices, undefined, type)
const device = await this.deviceMenu().show(devices, undefined, type)

if (device && device !== 'NONE') {
await this.openDeviceWindow(device)
Expand Down Expand Up @@ -574,7 +573,7 @@ export class HomeComponent implements AfterContentInit {
await this.browserWindowService.openAlignment({ bringToFront: true })
break
case 'SEQUENCER': {
const device = await this.deviceMenu.show(this.cameras, undefined, 'CAMERA')
const device = await this.deviceMenu().show(this.cameras, undefined, 'CAMERA')

if (device && device !== 'NONE') {
await this.browserWindowService.openSequencer(device, { bringToFront: true })
Expand Down
Loading

0 comments on commit 692dbb4

Please sign in to comment.