From 5a7a79f25d4a929f9e17f649a3f324bdac496606 Mon Sep 17 00:00:00 2001 From: Evan Carlin Date: Thu, 2 Jan 2025 09:07:30 -0700 Subject: [PATCH] Fix #4: Basic profile monitor UI (#11) --- etc/epics-install.sh | 152 ++++++ etc/epics-install.txt | 76 +++ ui/.editorconfig | 16 + ui/.gitignore | 44 ++ ui/README.md | 31 ++ ui/angular.json | 102 ++++ ui/package.json | 44 ++ ui/src/app/app-data.service.ts | 18 + ui/src/app/app-routing.module.ts | 10 + ui/src/app/app.component.spec.ts | 29 ++ ui/src/app/app.component.ts | 35 ++ ui/src/app/app.module.ts | 30 ++ .../heatmap-canvas.component.ts | 81 ++++ .../heatmap-with-lineouts.component.spec.ts | 21 + .../heatmap-with-lineouts.component.ts | 372 +++++++++++++++ .../heatmap-with-lineouts.component.ts-bad | 434 ++++++++++++++++++ ui/src/app/heatmap/heatmap.component.spec.ts | 21 + ui/src/app/heatmap/heatmap.component.ts | 176 +++++++ .../line-chart/line-chart.component.spec.ts | 21 + ui/src/app/line-chart/line-chart.component.ts | 127 +++++ .../profile-monitor.component.spec.ts | 21 + .../profile-monitor.component.ts | 163 +++++++ ui/src/assets/.gitkeep | 0 ui/src/favicon.ico | Bin 0 -> 948 bytes ui/src/index.html | 13 + ui/src/main.ts | 9 + ui/src/styles.css | 30 ++ ui/tsconfig.app.json | 16 + ui/tsconfig.json | 33 ++ ui/tsconfig.spec.json | 15 + 30 files changed, 2140 insertions(+) create mode 100644 etc/epics-install.sh create mode 100644 etc/epics-install.txt create mode 100644 ui/.editorconfig create mode 100644 ui/.gitignore create mode 100644 ui/README.md create mode 100644 ui/angular.json create mode 100644 ui/package.json create mode 100644 ui/src/app/app-data.service.ts create mode 100644 ui/src/app/app-routing.module.ts create mode 100644 ui/src/app/app.component.spec.ts create mode 100644 ui/src/app/app.component.ts create mode 100644 ui/src/app/app.module.ts create mode 100644 ui/src/app/heatmap-with-lineouts/heatmap-canvas.component.ts create mode 100644 ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.spec.ts create mode 100644 ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts create mode 100644 ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts-bad create mode 100644 ui/src/app/heatmap/heatmap.component.spec.ts create mode 100644 ui/src/app/heatmap/heatmap.component.ts create mode 100644 ui/src/app/line-chart/line-chart.component.spec.ts create mode 100644 ui/src/app/line-chart/line-chart.component.ts create mode 100644 ui/src/app/profile-monitor/profile-monitor.component.spec.ts create mode 100644 ui/src/app/profile-monitor/profile-monitor.component.ts create mode 100644 ui/src/assets/.gitkeep create mode 100644 ui/src/favicon.ico create mode 100644 ui/src/index.html create mode 100644 ui/src/main.ts create mode 100644 ui/src/styles.css create mode 100644 ui/tsconfig.app.json create mode 100644 ui/tsconfig.json create mode 100644 ui/tsconfig.spec.json diff --git a/etc/epics-install.sh b/etc/epics-install.sh new file mode 100644 index 0000000..1248aaf --- /dev/null +++ b/etc/epics-install.sh @@ -0,0 +1,152 @@ +#!/bin/bash +# +# Install epics, asyn, medm, and synaps +# +set -eou pipefail +shopt -s nullglob + +_asyn_version=R4-45 +_epics_version=7.0.8.1 +_medm_version=MEDM3_1_21 +_synapps_version=R6-3 + +_curl_untar() { + declare url=$1 + declare base=$2 + declare tgt=$3 + curl -L -s -S "$url" | tar xzf - + mv "$base" "$tgt" + cd "$tgt" +} + +_build_base_and_asyn() { + sudo dnf -y install re2c + declare d=$(dirname "$EPICS_BASE") + mkdir -p "$d" + cd "$d" + b=base-"$_epics_version" + _curl_untar https://epics-controls.org/download/base/"$b".tar.gz "$b" "$EPICS_BASE" + cd "$EPICS_BASE" + cd modules + _curl_untar https://github.com/epics-modules/asyn/archive/refs/tags/"$_asyn_version".tar.gz "asyn-$_asyn_version" asyn + perl -pi -e 's/^# (?=TIRPC)//' configure/CONFIG_SITE + cd .. + echo 'SUBMODULES += asyn' > Makefile.local + cd .. + # parallel make does not work + make +} + +_build_medm() { + _curl_untar https://github.com/epics-extensions/medm/archive/refs/tags/"$_medm_version".tar.gz "medm-$_medm_version" medm + perl -pi -e 's/^(?=USR_INCLUDES|SHARED_LIBRARIES|USR_LIBS)/#/' printUtils/Makefile + perl -pi -e 's/^(?=SHARED_LIBRARIES|USR_LIBS_DEFAULT)/#/; /USR_LIBS_DEFAULT/ && ($_ .= "USR_LDFLAGS_Linux = -lXm -lXt -lXmu -lXext -lX11\n")' xc/Makefile + perl -pi -e 's/^#(?=SCIPLOT)//; s/^(?=USR_LIBS)/#/; /USR_LIBS_DEFAULT/ && ($_ .= "USR_LDFLAGS_Linux = -lXm -lXt -lXp -lXmu -lXext -lX11\n")' medm/Makefile + grep USR_LDFLAGS_Linux medm/Makefile + grep USR_LDFLAGS_Linux xc/Makefile + # Not sure if parallel make works + make -j 4 + cd - >& /dev/null +} + +_build_synapps() { + declare d=synApps + # Must be absolute or fails silently + declare f=$PWD/$d.modules + cat <<'EOF' > "$f" +AREA_DETECTOR=R3-12-1 +AUTOSAVE=R5-11 +BUSY=R1-7-4 +CALC=R3-7-5 +DEVIOCSTATS=3.1.16 +SNCSEQ=R2-2-9 +SSCAN=R2-11-6 +EOF + curl -s -S -L https://github.com/EPICS-synApps/assemble_synApps/releases/download/"$_synapps_version"/assemble_synApps \ + | perl - --base="$EPICS_BASE" --dir="$d" --config="$f" + rm "$f" + cd "$d"/support + # otherwise gets a version conflict; This is the version that's installed already + # synApps does not install ASYN. + perl -pi -e 's/asyn-.*/asyn-4-42/' busy-R1-7-4/configure/RELEASE + make -j 4 + cd - >& /dev/null +} + +_err() { + _msg "$@" + return 1 +} + +_err_epics_base() { + _err 'update your ~/.post_bivio_bashrc +export EPICS_BASE=$HOME/.local/epics +# $EPICS_BASE/startup/EpicsHostArch outputs linux-x86_64; no need to be dynamic here +export EPICS_HOST_ARCH=linux-x86_64 +bivio_path_insert "$EPICS_BASE/bin/$EPICS_HOST_ARCH" +# EPICS_PVA list needs to be dynamic or will not find +export EPICS_CA_AUTO_ADDR_LIST=$EPICS_PVA_AUTO_ADDR_LIST +export EPICS_CA_ADDR_LIST=$EPICS_PVA_ADDR_LIST +export EPICS_PCAS_ROOT=$EPICS_BASE +f=$EPICS_BASE/extensions/synApps/support/areaDetector-R3-12-1 +export EPICS_DISPLAY_PATH=.:$f/ADSimDetector/simDetectorApp/op/adl:$f/ADCore/ADApp/op/adl:$f/ADUVC/uvcApp/op/adl:$EPICS_BASE/modules/asyn/asyn-R4-45/opi/medm + +and then: +source ~/.post_bivio_bashrc +EpicsHostArch will not be found +' +} + +_log() { + _msg $(date +%H%M%S) "$@" +} + +_main() { + if [[ ! ${EPICS_BASE:-} ]]; then + _err_epics_base + fi + if [[ -d $EPICS_BASE ]]; then + _err "please remove: +rm -rf '$EPICS_BASE' +" + fi + _source_bashrc + bivio_path_remove "$EPICS_BASE"/bin + _build_base_and_asyn + # Add epics to the path + _source_bashrc + cd "$EPICS_BASE" + mkdir -p extensions + cd extensions + _build_medm + _build_synapps + _msg_run +} + +_msg() { + echo "$*" 1>&2 +} + +_msg_run() { + _msg 'Run: +cd "$EPICS_BASE"/extensions/synApps/support/areaDetector-R3-12-1/ADSimDetector/iocs/simDetectorIOC/iocBoot/iocSimDetector +# In one window +../../bin/linux-x86_64/simDetectorApp st.cmd +# In another +medm -x -macro "P=13SIM1:, R=cam1:" ../../../../simDetectorApp/op/adl/simDetector.adl +# expect "Connected" in green in upper box; if blank boxes then it did not connnect +# In a third +caget 13SIM1:cam1:Dimensions +# ouptut: 13SIM1:cam1:Dimensions 10 0 0 0 0 0 0 0 0 0 0 +' +} + +_source_bashrc() { + set +eou pipefail + shopt -u nullglob + source $HOME/.bashrc + set -eou pipefail + shopt -s nullglob +} + +_main "$@" diff --git a/etc/epics-install.txt b/etc/epics-install.txt new file mode 100644 index 0000000..1ff3d11 --- /dev/null +++ b/etc/epics-install.txt @@ -0,0 +1,76 @@ +dnf install re2c + +get epics-base/epics-base from github (7.0 branch) +git submodule update --init --recursive + +in epics-base/epics-base/modules + git clone https://github.com/epics-modules/asyn.git + echo "SUBMODULES += asyn" > Makefile.local + update asyn/configure/CONFIG_SITE + TIRPC=YES + +in epics-base + make + +in epics-base/extensions (new dir) + git clone https://github.com/epics-extensions/medm.git + edit medm/Makefile + SCIPLOT = YES + #USR_LIBS_Linux = Xm Xt Xp Xmu X11 Xext + USR_LDFLAGS_Linux = -lXm -lXt -lXp -lXmu -lXext -lX11 + edit printUtils/Makefile + #USR_INCLUDES = -I$(X11_INC) + make + +in /home/vagrant/src/EPICS-synApps/support + # probably not needed for areadetector + # edit motorApp/MotorSrc/motordrvCom.h and add: + # #include + edit assemble_synApps.sh + EPICS_BASE=/home/vagrant/src/epics-base/epics-base + edit configure/RELEASE + EPICS_BASE=/home/vagrant/src/epics-base/epics-base + SUPPORT=/home/vagrant/src/EPICS-synApps/support/synApps/support + bash assemble_synApps.sh + +in /home/vagrant/src/EPICS-synApps/support/synApps/support/areaDetector-R3-11 + make + +Update sim detector +in /home/vagrant/src/EPICS-synApps/support/synApps/support/areaDetector-R3-11/ADSimDetector/iocs/simDetectorIOC/iocBoot/iocSimDetector + st.cmd.linux: (replace file contents) + #!../../bin/linux-x86_64/simDetectorApp + < ./envPaths + < ./st_base.cmd + st_base.cmd: (add lines after set_requestfile_path) + NDPvaConfigure("PVA1", $(QSIZE), 0, "$(PORT)", 0, $(PREFIX)Pva1:Image, 0, 0, 0) + dbLoadRecords("NDPva.template", "P=$(PREFIX),R=Pva1:, PORT=PVA1,ADDR=0,TIMEOUT=1,NDARRAY_PORT=$(PORT)") + # Must start PVA server if this is enabled + startPVAServer + chmod +x st.cmd.linux + + +And in my .post_bivio_bash_rc: + +# EPICS +export EPICS_BASE="/home/vagrant/src/epics-base/epics-base/" +export EPICS_HOST_ARCH=$(${EPICS_BASE}/startup/EpicsHostArch) +export PATH=${EPICS_BASE}/bin/${EPICS_HOST_ARCH}:${PATH} +export EPICS_PCAS_ROOT=${EPICS_BASE} +export EPICS_DISPLAY_PATH=.:/home/vagrant/src/EPICS-synApps/support/synApps/support/areaDetector-R3-11/ADSimDetector/simDetectorApp/op/adl:/home/vagrant/src/EPICS-synApps/support/synApps/support/areaDetector-R3-11/ADCore/ADApp/op/adl:/home/vagrant/src/EPICS-synApps/support/synApps/support/areaDetector-R3-11/ADUVC/uvcApp/op/adl:/home/vagrant/src/EPICS-synApps/support/synApps/support/asyn-R4-42/opi/medm + +#export EPICS_PVA_AUTO_ADDR_LIST=NO +#export EPICS_PVA_ADDR_LIST=10.0.2.15 + +#export EPICS_CA_AUTO_ADDR_LIST=NO +#export EPICS_CA_ADDR_LIST=10.0.2.15 + +# [py3;@v iocSimDetector]$ ./st.cmd.linux +# medm -x -macro "P=13SIM1:, R=cam1:" ../../../../simDetectorApp/op/adl/simDetector.adl + +# 13SIM1:cam1:Dimensions +# P=13SIM1: R=cam1 + +# caget XF:10IDC-BI{UVC-Cam:1}cam1:Dimensions +# XF:10IDC-BI{UVC-Cam:1}cam1:Dimensions +# P=XF:10IDC-BI{UVC-Cam:1}, cam=cam1 diff --git a/ui/.editorconfig b/ui/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/ui/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/ui/.gitignore b/ui/.gitignore new file mode 100644 index 0000000..1f4031f --- /dev/null +++ b/ui/.gitignore @@ -0,0 +1,44 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db + +package-lock.json diff --git a/ui/README.md b/ui/README.md new file mode 100644 index 0000000..23a17fe --- /dev/null +++ b/ui/README.md @@ -0,0 +1,31 @@ +# Screen + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.16. + +## First time + +npm install + +## Development server + +Run `ng serve --port 8080` for a dev server. Navigate to `http://localhost:8080/`. The application will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/ui/angular.json b/ui/angular.json new file mode 100644 index 0000000..832c472 --- /dev/null +++ b/ui/angular.json @@ -0,0 +1,102 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "screen": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/screen", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "screen:build:production" + }, + "development": { + "browserTarget": "screen:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "screen:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": false + } +} diff --git a/ui/package.json b/ui/package.json new file mode 100644 index 0000000..cc34dab --- /dev/null +++ b/ui/package.json @@ -0,0 +1,44 @@ +{ + "name": "screen", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^16.2.0", + "@angular/common": "^16.2.0", + "@angular/compiler": "^16.2.0", + "@angular/core": "^16.2.0", + "@angular/forms": "^16.2.0", + "@angular/platform-browser": "^16.2.0", + "@angular/platform-browser-dynamic": "^16.2.0", + "@angular/router": "^16.2.0", + "@ng-bootstrap/ng-bootstrap": "^15.1.2", + "@popperjs/core": "^2.11.6", + "@types/d3": "^7.4.3", + "bootstrap": "^5.2.3", + "d3": "^7.9.0", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^16.2.16", + "@angular/cli": "^16.2.16", + "@angular/compiler-cli": "^16.2.0", + "@angular/localize": "^16.2.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.6.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.1.3" + } +} diff --git a/ui/src/app/app-data.service.ts b/ui/src/app/app-data.service.ts new file mode 100644 index 0000000..ed74577 --- /dev/null +++ b/ui/src/app/app-data.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class AppDataService { + + public xheatmapData: number[][] = [ + [0, 4, 0, 0], + [1, 8, 10, 0], + [0, 10, 20, 11], + [0, 0, 12, 2], + ]; + + public heatmapData: number[][] = Array.from({ length: 10 }, () => Array(10).fill(0.0)); + + constructor() {} +} diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts new file mode 100644 index 0000000..0297262 --- /dev/null +++ b/ui/src/app/app-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/ui/src/app/app.component.spec.ts b/ui/src/app/app.component.spec.ts new file mode 100644 index 0000000..b861686 --- /dev/null +++ b/ui/src/app/app.component.spec.ts @@ -0,0 +1,29 @@ +import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [RouterTestingModule], + declarations: [AppComponent] + })); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'screen'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('screen'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('screen app is running!'); + }); +}); diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts new file mode 100644 index 0000000..bf37024 --- /dev/null +++ b/ui/src/app/app.component.ts @@ -0,0 +1,35 @@ +import { Component } from '@angular/core'; +import { AppDataService } from './app-data.service'; + +@Component({ + selector: 'app-root', + template: ` + + `, + styles: [], +}) +export class AppComponent { + title = 'screen'; + + oldHeatmapData: number[][] = [ + [0, 4, 0, 0], + [1, 8, 10, 0], + [0, 10, 20, 11], + [0, 0, 12, 2], + ]; + + lineData: number[][] = [ + [0, 5.3443e-3], + [1.0, 6.055e-3], + [1.1, 5.964e-3], + [2.1, 3.554e-3], + [2.2, 3.401e-3], + [3.2, 2.746e-3], + ]; + + heatmapData: number[][]; + + constructor(dataService: AppDataService) { + this.heatmapData = dataService.heatmapData; + } +} diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts new file mode 100644 index 0000000..b3b6a13 --- /dev/null +++ b/ui/src/app/app.module.ts @@ -0,0 +1,30 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { LineChartComponent } from './line-chart/line-chart.component'; +import { HeatmapComponent } from './heatmap/heatmap.component'; +import { HeatmapWithLineoutsComponent } from './heatmap-with-lineouts/heatmap-with-lineouts.component'; +import { HeatmapCanvasComponent } from './heatmap-with-lineouts/heatmap-canvas.component'; +import { ProfileMonitorComponent } from './profile-monitor/profile-monitor.component'; + +@NgModule({ + declarations: [ + AppComponent, + LineChartComponent, + HeatmapComponent, + HeatmapWithLineoutsComponent, + HeatmapCanvasComponent, + ProfileMonitorComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + NgbModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/ui/src/app/heatmap-with-lineouts/heatmap-canvas.component.ts b/ui/src/app/heatmap-with-lineouts/heatmap-canvas.component.ts new file mode 100644 index 0000000..5b4d05a --- /dev/null +++ b/ui/src/app/heatmap-with-lineouts/heatmap-canvas.component.ts @@ -0,0 +1,81 @@ +import { + AfterViewInit, + Component, + ElementRef, + Input, + OnChanges, + ViewChild, +} from '@angular/core'; +import * as d3 from 'd3'; + + +@Component({ + selector: 'app-heatmap-canvas', + template: ` + + `, + styles: [], +}) +export class HeatmapCanvasComponent implements AfterViewInit, OnChanges { + @ViewChild('canvas') canvas!:ElementRef; + @Input() width = 0; + @Input() height = 0; + @Input() intensity: number[][] = []; + // zoomOffsets: [dx, dy, dWidth, dHeight] + @Input() zoomOffsets: number[] = []; + @Input() colorMap = "interpolateViridis"; + ctx: any; + cacheCanvas: any; + colorScale: any; + + initImage() { + const imageData = this.ctx.getImageData(0, 0, this.cacheCanvas.width, this.cacheCanvas.height); + const xSize = this.intensity[0].length; + const ySize = this.intensity.length; + for (let yi = ySize - 1, p = -1; yi >= 0; --yi) { + for (let xi = 0; xi < xSize; ++xi) { + const c = d3.rgb(this.colorScale(this.intensity[yi][xi])); + imageData.data[++p] = c.r; + imageData.data[++p] = c.g; + imageData.data[++p] = c.b; + imageData.data[++p] = 255; + } + } + this.cacheCanvas.getContext('2d').putImageData(imageData, 0, 0); + } + + max() : number { + return d3.max(this.intensity, (row: number[]) => { + return d3.max(row); + }) as number; + } + + min() : number { + return d3.min(this.intensity, (row: number[]) => { + return d3.min(row); + }) as number; + } + + ngAfterViewInit() { + this.colorScale = d3.scaleSequential((d3 as any)[this.colorMap]); + this.ctx = this.canvas.nativeElement.getContext('2d', {}); + this.cacheCanvas = document.createElement('canvas'); + this.cacheCanvas.width = this.intensity[0].length; + this.cacheCanvas.height = this.intensity.length; + this.colorScale.domain([this.min(), this.max()]); + this.initImage(); + } + + ngOnChanges(changes: any) { + if (this.cacheCanvas) { + this.refresh(); + } + } + + refresh() { + this.canvas.nativeElement.width = this.width; + this.canvas.nativeElement.height = this.height; + this.ctx.imageSmoothingEnabled = false; + this.ctx.drawImage(this.cacheCanvas, ...this.zoomOffsets); + } +} diff --git a/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.spec.ts b/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.spec.ts new file mode 100644 index 0000000..e61683c --- /dev/null +++ b/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeatmapWithLineoutsComponent } from './heatmap-with-lineouts.component'; + +describe('HeatmapWithLineoutsComponent', () => { + let component: HeatmapWithLineoutsComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HeatmapWithLineoutsComponent] + }); + fixture = TestBed.createComponent(HeatmapWithLineoutsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts b/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts new file mode 100644 index 0000000..7e50e7c --- /dev/null +++ b/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts @@ -0,0 +1,372 @@ +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + HostListener, + Input, + OnChanges, + OnDestroy, + ViewChild, +} from '@angular/core'; +import { Subject, debounceTime } from 'rxjs'; +import * as d3 from 'd3'; + +class SVG { + static clipPathId(width: number, height: number): string { + return `sr-clippath-${width}-${height}`; + } + + static clipPathURL(width: number, height: number): string { + return `url(#${SVG.clipPathId(width, height)})`; + } + + static translate(x: number, y: number): string { + return `translate(${x}, ${y})`; + } +} + +@Component({ + selector: 'app-heatmap-with-lineouts', + template: ` +

OTRS:LI21:291

+
+
+ +
+
+
+
{{ yLabel }}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ xLabel }}
+
+ `, + styles: [ + ` +.sr-x-overlay path, .sr-y-overlay path { + fill: none; + stroke: steelblue; + stroke-width: 2; +} + `, + ], +}) +export class HeatmapWithLineoutsComponent { + @ViewChild('figure') el!:ElementRef; + + //TODO: input should be a structure + // rows + // xLabel + // yLabel + // xDomain + // yDomain + // colormap + + @Input() data: number[][] = []; + SVG = SVG; + + xScale = d3.scaleLinear(); + xZoomScale = this.xScale; + xyScale = d3.scaleLinear(); + xLabel = "x [mm]"; + xZoom: any; + + yScale = d3.scaleLinear(); + yZoomScale = this.yScale; + yxScale = d3.scaleLinear(); + yLabel = "y [mm]"; + yZoom: any; + zoomOffsets: number[] = []; + colorMap = "interpolateInferno"; + + xyZoom: any; + prevXYZoom = d3.zoomIdentity; + canvasWidth = 1; + canvasHeight = 1; + + margin = { + left: 65, + right: 65, + top: 10, + bottom: 30, + }; + lineoutPad = 12; + lineoutSize = 0; + + resize = new Subject; + + constructor(private cdRef: ChangeDetectorRef) { + } + + select(selector?: string) : any { + const s = d3.select(this.el.nativeElement); + return selector ? s.select(selector) : s; + } + + center(event: any, target: any) { + if (event.sourceEvent) { + const p = d3.pointers(event, target); + return [d3.mean(p, d => d[0]), d3.mean(p, d => d[1])]; + } + return [this.canvasWidth / 2, this.canvasHeight / 2]; + } + + domain(axisIndex: number) : number[] { + //TODO(pjm): from input + if (axisIndex === 0) { + return [-4, 4]; + } + return [0, 4]; + } + + handleZoom(event: any) { + const t = event.transform; + const k = t.k / this.prevXYZoom.k; + if (k === 1) { + // pan + this.select('.sr-mouse-rect-x').call( + this.xZoom.translateBy, + (t.x - this.prevXYZoom.x) / d3.zoomTransform(this.select('.sr-mouse-rect-x').node()).k, + 0, + ); + //TODO(pjm): consolidate this with above + this.select('.sr-mouse-rect-y').call( + this.yZoom.translateBy, + 0, + (t.y - this.prevXYZoom.y) / d3.zoomTransform(this.select('.sr-mouse-rect-y').node()).k, + ); + } + else { + // zoom + const p = this.center(event, this.select('.sr-mouse-rect-xy').node()); + this.select('.sr-mouse-rect-x').call(this.xZoom.scaleBy, k, p); + this.select('.sr-mouse-rect-y').call(this.yZoom.scaleBy, k, p); + } + this.prevXYZoom = t; + this.refresh(); + } + + handleZoomX(t: any) { + if (t.k < 1) { + t.k = 1; + } + if (t.x > 0) { + t.x = 0; + } + else if (t.x < 0) { + const r = this.xZoomScale.range()[1]; + if (t.k * r - r + t.x < 0) { + t.x = -(t.k * r - r); + } + } + this.xZoomScale = t.rescaleX(this.xScale); + this.refresh(); + } + + handleZoomY(t: any) { + //TODO(pjm): consolidate with handleZoomX + if (t.k < 1) { + t.k = 1; + } + if (t.y > 0) { + t.y = 0; + } + else if (t.y < 0) { + const r = this.yZoomScale.range()[0]; + if (t.k * r - r + t.y < 0) { + t.y = -(t.k * r - r); + } + } + this.yZoomScale = t.rescaleY(this.yScale); + this.refresh(); + } + + refresh() { + const w = parseInt(this.select().style('width')); + if (isNaN(w)) { + return; + } + const prevSize = [this.canvasWidth, this.canvasHeight]; + this.lineoutSize = Math.floor((w - (this.margin.left + this.margin.right)) / 4); + this.canvasWidth = w - (this.margin.left + this.lineoutSize + this.margin.right); + this.canvasHeight = Math.floor(this.canvasWidth * (this.data.length / this.data[0].length)); + + this.xScale.range([0, this.canvasWidth]); + this.xZoomScale.range([0, this.canvasWidth]); + + if ( + (prevSize[0] && prevSize[0] != this.canvasWidth) + || (prevSize[1] && prevSize[1] != this.canvasHeight) + ) { + //TODO(pjm): see if this is update-able via a call() + let t = d3.zoomTransform(this.select('.sr-mouse-rect-x').node()); + (t.x as any) *= this.canvasWidth / prevSize[0]; + t = d3.zoomTransform(this.select('.sr-mouse-rect-y').node()); + (t.y as any) *= this.canvasHeight / prevSize[1]; + } + + //TODO(pjm): could keep axis as instance variable + this.select('.sr-x-axis').call(d3.axisBottom(this.xZoomScale).ticks(5)); + this.select('.sr-x-axis-grid').call(d3.axisBottom(this.xZoomScale).ticks(5).tickSize(-(this.canvasHeight + this.lineoutSize))); + this.yScale.range([this.canvasHeight, 0]); + this.yZoomScale.range([this.canvasHeight, 0]); + this.select('.sr-y-axis').call(d3.axisRight(this.yZoomScale).ticks(5)); + this.select('.sr-y-axis-grid').call(d3.axisRight(this.yZoomScale).ticks(5).tickSize(-(this.canvasWidth + this.lineoutSize))); + + this.yxScale + //TODO(pjm): data min/max + .domain([0, 260]) + .range([this.lineoutSize - this.lineoutPad, 0]); + this.select('.sr-yx-axis').call(d3.axisBottom(this.yxScale).ticks(3).tickFormat(d3.format('.1e'))); + + this.xyScale + .domain([0, 260]) + .range([this.lineoutSize - this.lineoutPad, 0]); + this.select('.sr-xy-axis').call(d3.axisLeft(this.xyScale).ticks(5).tickFormat(d3.format('.1e'))); + + const xd = this.domain(0); + // offset by half pixel width + const xoff = (xd[1] - xd[0]) / this.data[0].length / 2; + const xline = d3.line() + .x((d) => this.xZoomScale(d[0] + xoff)) + .y((d) => this.xyScale(d[1])); + const xdata = this.data[Math.round(this.data.length / 2)].map((v, idx) => { + return [ + this.domain(0)[0] + (idx / this.data[0].length) * (this.domain(0)[1] - this.domain(0)[0]), + v, + ]; + }); + this.select('.sr-x-overlay path').datum(xdata).attr('d', xline); + + //TODO(pjm): consolidate with x above + const yd = this.domain(1); + const yoff = (yd[1] - yd[0]) / this.data.length / 2; + const yline = d3.line() + .x((d) => this.yxScale(d[1])) + .y((d) => this.yZoomScale(d[0] + yoff)); + const ydata = this.data.map((v, idx) => { + return [ + this.domain(1)[0] + (idx / this.data.length) * (this.domain(1)[1] - this.domain(1)[0]), + v[Math.round(v.length / 2)], + ]; + }); + this.select('.sr-y-overlay path').datum(ydata).attr('d', yline); + + const xZoomDomain = this.xZoomScale.domain(); + const xDomain = this.xScale.domain(); + const yZoomDomain = this.yZoomScale.domain(); + const yDomain = this.yScale.domain(); + const zoomWidth = xZoomDomain[1] - xZoomDomain[0]; + const zoomHeight = yZoomDomain[1] - yZoomDomain[0]; + this.zoomOffsets = [ + -(xZoomDomain[0] - xDomain[0]) / zoomWidth * this.canvasWidth, + -(yDomain[1] - yZoomDomain[1]) / zoomHeight * this.canvasHeight, + (xDomain[1] - xDomain[0]) / zoomWidth * this.canvasWidth, + (yDomain[1] - yDomain[0]) / zoomHeight * this.canvasHeight, + ]; + } + + ngOnDestroy() { + //TODO(pjm): not sure this is required, check for memory leaks + //this.xZoom.on('zoom', null); + //this.resize.next(); + //this.resize.complete(); + } + + ngAfterViewInit() { + this.resize.asObservable().pipe(debounceTime(350)).subscribe(() => { + this.refresh(); + }); + + this.xZoom = d3.zoom().on('zoom', (event) => { this.handleZoomX(event.transform) }); + this.select('.sr-mouse-rect-x').call(this.xZoom); + this.yZoom = d3.zoom().on('zoom', (event) => { this.handleZoomY(event.transform) }); + this.select('.sr-mouse-rect-y').call(this.yZoom); + this.xyZoom = d3.zoom().on('zoom', (event) => { this.handleZoom(event) }); + this.select('.sr-mouse-rect-xy').call(this.xyZoom); + + this.xScale.domain(this.domain(0)); + this.yScale.domain(this.domain(1)); + + this.refresh(); + // required because refresh() changes view values (element sizes) + this.cdRef.detectChanges(); + } + + ngOnChanges(changes: any) { + if (this.el) { + this.refresh(); + } + } + + @HostListener('window:resize') + onResize() { + this.resize.next(); + } +} diff --git a/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts-bad b/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts-bad new file mode 100644 index 0000000..12fbe97 --- /dev/null +++ b/ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts-bad @@ -0,0 +1,434 @@ +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + HostListener, + Input, + OnChanges, + OnDestroy, + ViewChild, +} from '@angular/core'; +import { Subject, debounceTime } from 'rxjs'; +import * as d3 from 'd3'; + +class SVG { + + static clipPathId(width: number, height: number): string { + return `sr-clippath-${width}-${height}`; + } + + static clipPathURL(width: number, height: number): string { + return `url(#${SVG.clipPathId(width, height)})`; + } + + static eventCenter(event: any, target: any) : number[] { + const p = d3.pointers(event, target); + return [d3.mean(p, d => d[0]), d3.mean(p, d => d[1])] as number[]; + } + + static translate(x: number, y: number): string { + return `translate(${x}, ${y})`; + } +} + + +@Component({ + selector: 'app-heatmap-with-lineouts', + template: ` +

OTRS:LI21:291

+
+
+ +
+
+
+
{{ yLabel }}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ xLabel }}
+
+ `, + styles: [ + ` +.sr-x-overlay path, .sr-y-overlay path { + fill: none; + stroke: steelblue; + stroke-width: 2; +} + `, + ], +}) +export class HeatmapWithLineoutsComponent { + @ViewChild('figure') el!:ElementRef; + + //TODO: input should be a structure + // rows + // xLabel + // yLabel + // xDomain + // yDomain + // colormap + + @Input() data: number[][] = []; + SVG = SVG; + xScale = d3.scaleLinear(); + xZoomScale = this.xScale; + xyScale = d3.scaleLinear(); + yScale = d3.scaleLinear(); + //yZoomScale = this.yScale; + yxScale = d3.scaleLinear(); + //colorScale = d3.scaleSequential(d3.interpolateViridis); + colorScale = d3.scaleSequential(d3.interpolateInferno); + xLabel = "x [mm]"; + yLabel = "y [mm]"; + canvas: any; + ctx: any; + cacheCanvas: any; + imageData: any; + zoomX = d3.zoom(); + zoomY = d3.zoom(); + zoom = d3.zoom(); + z = d3.zoomIdentity; + + margin = { + left: 65, + right: 65, + top: 10, + bottom: 30, + }; + pad = 12; + canvasWidth = 1; + canvasHeight = 1; + lineoutSize = 0; + + resize = new Subject; + + constructor(private cdRef: ChangeDetectorRef) { + } + + select(selector?: string) : any { + const s = d3.select(this.el.nativeElement); + return selector ? s.select(selector) : s; + } + + domain(axisIndex: number) : number[] { + //TODO(pjm): from input + if (axisIndex === 0) { + return [-4, 4]; + } + return [0, 4]; + } + + handleZoom(e: any) { + const t = e.transform; + const k = t.k / this.z.k; + const point = SVG.eventCenter(event, this.select('svg').node()); + console.log('point:', point); + let target = ''; + + if (point[0] > this.margin.left + && point[0] < (this.margin.left + this.canvasWidth)) { + if (point[1] > this.margin.top + && point[1] < (this.margin.top + this.canvasHeight)) { + target = 'canvas'; + } + else if (point[1] > (this.margin.top + this.canvasHeight) + && point[1] < (this.margin.top + this.canvasHeight + this.lineoutSize)) { + target = 'xlineout'; + } + } + else if (point[0] > (this.margin.left + this.canvasWidth) + && point[0] < (this.margin.left + this.canvasWidth + this.lineoutSize)) { + if (point[1] > this.margin.top + && point[1] < (this.margin.top + this.canvasHeight)) { + target = 'ylineout'; + } + } + if (target) { + console.log('target:', target); + if (target === 'canvas' || target === 'xlineout') { + console.log('zoom/pan x'); + + this.xZoomScale = t.rescaleX(this.xScale).interpolate(d3.interpolateRound); + } + this.refresh(); + } + + this.z = t; + } + + /* + handleZoomX(e: any) { + const t = e.transform; + if (t.k < 1) { + t.k = 1; + } + if (t.x > 0) { + t.x = 0; + } + else if (t.x < 0) { + //TODO(pjm): this has a bug if the body scrollbar is present, + // you can't pan all the way to the right + const r = this.xZoomScale.range()[1]; + console.log('r:', r); + if (t.k * r - r + t.x < 0) { + t.x = -(t.k * r - r); + } + } + this.xZoomScale = t.rescaleX(this.xScale).interpolate(d3.interpolateRound); + } + + handleZoom(e: any) { + const t = e.transform; + //this.handleZoomX(e); + //this.handleZoomY(e); + } + + handleZoomY(e: any) { + const t = e.transform; + if (t.k < 1) { + t.k = 1; + } + if (t.y > 0) { + t.y = 0; + } + else if (t.y < 0) { + const r = this.yZoomScale.range()[0]; + if (t.k * r - r + t.y < 0) { + t.y = -(t.k * r - r); + } + } + this.yZoomScale = t.rescaleY(this.yScale).interpolate(d3.interpolateRound); + } + */ + + + refresh() { + const w = parseInt(this.select().style('width')); + if (isNaN(w)) { + return; + } + this.lineoutSize = Math.floor((w - (this.margin.left + this.margin.right)) / 4); + this.canvasWidth = w - (this.margin.left + this.lineoutSize + this.margin.right); + this.canvasHeight = Math.floor(this.canvasWidth * (this.data.length / this.data[0].length)); + + this.xZoomScale.range([0, this.canvasWidth]); + //TODO(pjm): could keep axis as instance variable + this.select('.sr-x-axis').call(d3.axisBottom(this.xZoomScale).ticks(5)); + this.select('.sr-x-axis-grid').call(d3.axisBottom(this.xZoomScale).ticks(5).tickSize(-(this.canvasHeight + this.lineoutSize))); + this.yScale.range([this.canvasHeight, 0]); + this.select('.sr-y-axis').call(d3.axisRight(this.yScale).ticks(5)); + this.select('.sr-y-axis-grid').call(d3.axisRight(this.yScale).ticks(5).tickSize(-(this.canvasWidth + this.lineoutSize))); + + this.yxScale + //TODO(pjm): should be from data min/max + .domain([0, 260]) + .range([this.lineoutSize - this.pad, 0]); + this.select('.sr-yx-axis').call(d3.axisBottom(this.yxScale).ticks(3).tickFormat(d3.format('.1e'))); + + this.xyScale + .domain([0, 260]) + .range([this.lineoutSize - this.pad, 0]); + this.select('.sr-xy-axis').call(d3.axisLeft(this.xyScale).ticks(5).tickFormat(d3.format('.1e'))); + + const xd = this.domain(0); + //const xoff = (xd[1] - xd[0]) / this.data[0].length / 2; + const xoff = 0; + const xline = d3.line() + .x((d) => this.xZoomScale(d[0] + xoff)) + .y((d) => this.xyScale(d[1])); + const xdata = this.data[Math.round(this.data.length / 2)].map((v, idx) => { + return [ + this.domain(0)[0] + (idx / this.data[0].length) * (this.domain(0)[1] - this.domain(0)[0]), + v, + ]; + }); + this.select('.sr-x-overlay path').datum(xdata).attr('d', xline); + + const yd = this.domain(1); + const yoff = (yd[1] - yd[0]) / this.data.length / 2; + const yline = d3.line() + .x((d) => this.yxScale(d[1])) + .y((d) => this.yScale(d[0] + yoff)); + const ydata = this.data.map((v, idx) => { + return [ + this.domain(1)[0] + (idx / this.data.length) * (this.domain(1)[1] - this.domain(1)[0]), + v[Math.round(v.length / 2)], + ]; + }); + this.select('.sr-y-overlay path').datum(ydata).attr('d', yline); + + this.canvas.width = this.canvasWidth; + this.canvas.height = this.canvasHeight; + + + if (false) { + const xZoomDomain = this.xZoomScale.domain(); + const xDomain = this.xScale.domain(); + const yZoomDomain = this.yScale.domain(); + const yDomain = this.yScale.domain(); + const zoomWidth = xZoomDomain[1] - xZoomDomain[0]; + const zoomHeight = yZoomDomain[1] - yZoomDomain[0]; + const ctx = this.canvas.getContext('2d'); + ctx.imageSmoothingEnabled = false; + ctx.drawImage( + this.cacheCanvas, + -(xZoomDomain[0] - xDomain[0]) / zoomWidth * this.canvasWidth, + -(yDomain[1] - yZoomDomain[1]) / zoomHeight * this.canvasHeight, + (xDomain[1] - xDomain[0]) / zoomWidth * this.canvasWidth, + (yDomain[1] - yDomain[0]) / zoomHeight * this.canvasHeight, + ); + } + + //const xZoom = d3.zoom(); //.on('zoom', (event) => { this.handleZoomX(event); this.refresh() }); + //this.select('.sr-mouse-rect-x').call(this.xZoom); + //const yZoom = d3.zoom(); //.on('zoom', (event) => { this.handleZoomY(event); this.refresh() }); + //this.select('.sr-mouse-rect-y').call(this.yZoom); + //const xyZoom = d3.zoom().on('zoom', (event) => { this.handleZoomXY(event); this.refresh() }); + //this.select('.sr-mouse-rect-xy').call(this.xyZoom); + + } + + initImage() { + const xSize = this.data[0].length; + const ySize = this.data.length; + for (let yi = ySize - 1, p = -1; yi >= 0; --yi) { + for (let xi = 0; xi < xSize; ++xi) { + const c = d3.rgb(this.colorScale(this.data[yi][xi]) as any); + this.imageData.data[++p] = c.r; + this.imageData.data[++p] = c.g; + this.imageData.data[++p] = c.b; + this.imageData.data[++p] = 255; + } + } + this.cacheCanvas.getContext('2d').putImageData(this.imageData, 0, 0); + } + + max() : number { + return d3.max(this.data, (row: number[]) => { + return d3.max(row); + }) as number; + } + + min() : number { + return d3.min(this.data, (row: number[]) => { + return d3.min(row); + }) as number; + } + + ngOnDestroy() { + //TODO(pjm): not sure this is required + //this.xZoom.on('zoom', null); + //this.resize.next(); + //this.resize.complete(); + } + + ngAfterViewInit() { + this.resize.asObservable().pipe(debounceTime(350)).subscribe(() => this.refresh()); + + this.canvas = this.select('canvas').node(); + this.ctx = this.canvas.getContext('2d', { willReadFrequently: true }); + this.cacheCanvas = document.createElement('canvas'); + + this.zoom.on('zoom', (event) => { + this.handleZoom(event); + }); + this.select('svg').call(this.zoom); + + /* + this.xZoom = d3.zoom().on('zoom', (event) => { this.handleZoomX(event); this.refresh() }); + this.select('.sr-mouse-rect-x').call(this.xZoom); + this.yZoom = d3.zoom().on('zoom', (event) => { this.handleZoomY(event); this.refresh() }); + this.select('.sr-mouse-rect-y').call(this.yZoom); + this.xyZoom = d3.zoom().on('zoom', (event) => { this.handleZoomXY(event); this.refresh() }); + this.select('.sr-mouse-rect-xy').call(this.xyZoom); + */ + + //TODO(pjm): watch input, load data + this.cacheCanvas.width = this.data[0].length; + this.cacheCanvas.height = this.data.length; + this.imageData = this.ctx.getImageData(0, 0, this.cacheCanvas.width, this.cacheCanvas.height); + this.colorScale.domain([this.min(), this.max()]); + this.initImage(); + this.xScale.domain(this.domain(0)); + this.yScale.domain(this.domain(1)); + + this.refresh(); + // required because refresh changes view values + this.cdRef.detectChanges(); + } + + ngOnChanges(changes: any) { + if (this.el) { + this.refresh(); + } + } + + @HostListener('window:resize') + onResize() { + this.resize.next(); + } +} diff --git a/ui/src/app/heatmap/heatmap.component.spec.ts b/ui/src/app/heatmap/heatmap.component.spec.ts new file mode 100644 index 0000000..743e116 --- /dev/null +++ b/ui/src/app/heatmap/heatmap.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeatmapComponent } from './heatmap.component'; + +describe('HeatmapComponent', () => { + let component: HeatmapComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [HeatmapComponent] + }); + fixture = TestBed.createComponent(HeatmapComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/heatmap/heatmap.component.ts b/ui/src/app/heatmap/heatmap.component.ts new file mode 100644 index 0000000..8e64b0d --- /dev/null +++ b/ui/src/app/heatmap/heatmap.component.ts @@ -0,0 +1,176 @@ +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + HostListener, + Input, + OnChanges, + ViewChild, +} from '@angular/core'; +import { Subject, debounceTime } from 'rxjs'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-heatmap', + template: ` +

OTRS:LI21:291

+
+
+ +
+
+
+
{{ yLabel }}
+
+
+ + + + + + + + +
+
+
{{ xLabel }}
+
+
+
+ `, + styles: [], +}) +export class HeatmapComponent { + @ViewChild('figure') el!:ElementRef; + + //TODO: input should be a structure + // rows + // xLabel + // yLabel + // xDomain + // yDomain + // colormap + + @Input() data: number[][] = []; + resize = new Subject; + margin = { + left: 65, + right: 40, + top: 0, + bottom: 30, + }; + width = 0; + aspectRatio = 1; + xScale = d3.scaleLinear(); + yScale = d3.scaleLinear(); + //colorScale = d3.scaleSequential(d3.interpolateViridis); + colorScale = d3.scaleSequential(d3.interpolateInferno); + xLabel = "x [mm]"; + yLabel = "y [mm]"; + canvas: any; + ctx: any; + cacheCanvas: any; + imageData: any; + + constructor(private cdRef: ChangeDetectorRef) {} + + select(selector?: string) : any { + const s = d3.select(this.el.nativeElement); + return selector ? s.select(selector) : s; + } + + domain(axisIndex: number) : number[] { + //TODO(pjm): from input + if (axisIndex === 0) { + return [(-320 * 5 - 1000) * 1e-3, (320 * 5 - 1000) * 1e-3]; + } + return [(-240 * 5 - 500) * 1e-3, (240 * 5 - 500) * 1e-3]; + } + + refresh() { + const w = parseInt(this.select().style('width')); + if (isNaN(w)) { + return; + } + this.width = w - this.margin.left - this.margin.right; + this.aspectRatio = this.data[0].length / this.data.length; + this.xScale + .range([0, this.width]) + .domain(this.domain(0)); + this.select('.sr-x-axis').call(d3.axisBottom(this.xScale).ticks(5)); + this.yScale + .domain(this.domain(1)) + .range([Math.round(this.width / this.aspectRatio), 0]) + .nice(); + this.select('.sr-y-axis').call(d3.axisLeft(this.yScale).ticks(5)); + + this.canvas.width = this.width; + this.canvas.height = Math.round(this.width / this.aspectRatio); + const ctx = this.canvas.getContext('2d'); + ctx.imageSmoothingEnabled = false; + ctx.drawImage( + this.cacheCanvas, + 0, + 0, + this.width, + Math.round(this.width / this.aspectRatio), + ); + } + + initImage() { + const xSize = this.data[0].length; + const ySize = this.data.length; + for (let yi = ySize - 1, p = -1; yi >= 0; --yi) { + for (let xi = 0; xi < xSize; ++xi) { + const c = d3.rgb(this.colorScale(this.data[yi][xi]) as any); + this.imageData.data[++p] = c.r; + this.imageData.data[++p] = c.g; + this.imageData.data[++p] = c.b; + this.imageData.data[++p] = 255; + } + } + this.cacheCanvas.getContext('2d').putImageData(this.imageData, 0, 0); + } + + max() : number { + return d3.max(this.data, (row: number[]) => { + return d3.max(row); + }) as number; + } + + min() : number { + return d3.min(this.data, (row: number[]) => { + return d3.min(row); + }) as number; + } + + ngAfterViewInit() { + this.resize.asObservable().pipe(debounceTime(350)).subscribe(() => this.refresh()); + this.canvas = this.select('canvas').node(); + this.ctx = this.canvas.getContext('2d', { willReadFrequently: true }); + this.cacheCanvas = document.createElement('canvas'); + + //TODO(pjm): watch input, load data + this.cacheCanvas.width = this.data[0].length; + this.cacheCanvas.height = this.data.length; + this.imageData = this.ctx.getImageData(0, 0, this.cacheCanvas.width, this.cacheCanvas.height); + this.colorScale.domain([this.min(), this.max()]); + this.initImage(); + + this.refresh(); + // required because refresh changes view values + this.cdRef.detectChanges(); + } + + ngOnChanges(changes: any) { + if (this.el) { + this.refresh(); + } + } + + @HostListener('window:resize') + onResize() { + this.resize.next(); + } +} diff --git a/ui/src/app/line-chart/line-chart.component.spec.ts b/ui/src/app/line-chart/line-chart.component.spec.ts new file mode 100644 index 0000000..13a2abd --- /dev/null +++ b/ui/src/app/line-chart/line-chart.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineChartComponent } from './line-chart.component'; + +describe('LineChartComponent', () => { + let component: LineChartComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [LineChartComponent] + }); + fixture = TestBed.createComponent(LineChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/line-chart/line-chart.component.ts b/ui/src/app/line-chart/line-chart.component.ts new file mode 100644 index 0000000..6dd359d --- /dev/null +++ b/ui/src/app/line-chart/line-chart.component.ts @@ -0,0 +1,127 @@ +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + HostListener, + Input, + OnChanges, + ViewChild, +} from '@angular/core'; +import { Subject, debounceTime } from 'rxjs'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-line-chart', + template: ` +

Line Chart

+
+
+
+
{{ yLabel }}
+
+
+ + + + + + + + + +
+
+
{{ xLabel }}
+
+
+
+`, + styles: [ + ` +.sr-overlay path { + fill: none; + stroke: #ffab00; + stroke-width: 3; +} +` + ], +}) +export class LineChartComponent { + @ViewChild('figure') el!:ElementRef; + @Input() data: number[][] = []; + resize = new Subject; + margin = { + left: 65, + right: 20, + top: 0, + bottom: 30, + }; + width = 0; + height = 0; + xScale = d3.scaleLinear(); + yScale = d3.scaleLinear(); + xLabel = "x [µm]"; + yLabel = "y [µm]"; + + constructor(private cdRef: ChangeDetectorRef) {} + + select(selector?: string) : any { + const s = d3.select(this.el.nativeElement); + return selector ? s.select(selector) : s; + } + + max(axisIndex: number) : any { + return d3.max(this.data, (d: number[]) => d[axisIndex]); + } + + min(axisIndex: number) : any { + return d3.min(this.data, (d: number[]) => d[axisIndex]); + } + + domain(axisIndex: number) : number[] { + return [this.min(axisIndex), this.max(axisIndex)]; + } + + refresh() { + const w = parseInt(this.select().style('width')); + if (isNaN(w)) { + return; + } + this.width = w - this.margin.left - this.margin.right; + this.height = this.width * 1 / 4; + this.xScale + .range([0, this.width]) + .domain(this.domain(0)); + this.select('.sr-x-axis').call(d3.axisBottom(this.xScale).ticks(5)); + this.select('.sr-x-axis-grid').call(d3.axisBottom(this.xScale).ticks(5).tickSize(-this.height)); + this.yScale + .domain(this.domain(1)) + .range([this.height, 0]) + .nice(); + this.select('.sr-y-axis').call(d3.axisLeft(this.yScale).ticks(5)); + this.select('.sr-y-axis-grid').call(d3.axisLeft(this.yScale).ticks(5).tickSize(-this.width)); + const line = d3.line() + .x((d) => this.xScale(d[0])) + .y((d) => this.yScale(d[1])); + this.select('.sr-overlay path').datum(this.data).attr('d', line); + } + + ngAfterViewInit() { + this.resize.asObservable().pipe(debounceTime(350)).subscribe(() => this.refresh()); + this.refresh(); + // required because drawBars changes view values + this.cdRef.detectChanges(); + } + + ngOnChanges(changes: any) { + if (this.el) { + this.refresh(); + } + } + + @HostListener('window:resize') + onResize() { + this.resize.next(); + } +} diff --git a/ui/src/app/profile-monitor/profile-monitor.component.spec.ts b/ui/src/app/profile-monitor/profile-monitor.component.spec.ts new file mode 100644 index 0000000..bdb2bba --- /dev/null +++ b/ui/src/app/profile-monitor/profile-monitor.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfileMonitorComponent } from './profile-monitor.component'; + +describe('ProfileMonitorComponent', () => { + let component: ProfileMonitorComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ProfileMonitorComponent] + }); + fixture = TestBed.createComponent(ProfileMonitorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/profile-monitor/profile-monitor.component.ts b/ui/src/app/profile-monitor/profile-monitor.component.ts new file mode 100644 index 0000000..d26c496 --- /dev/null +++ b/ui/src/app/profile-monitor/profile-monitor.component.ts @@ -0,0 +1,163 @@ +import { Component } from '@angular/core'; +import { AppDataService } from '../app-data.service'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-profile-monitor', + template: ` +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+ +
+ + +
+ + +
+
+ +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ `, + styles: [], +}) +export class ProfileMonitorComponent { + heatmapData: number[][]; + form = new FormGroup({ + beamPath: new FormControl(''), + camera: new FormControl(''), + cameraPV: new FormControl('OTRS:LI21:291'), + calcStats: new FormControl(''), + curveMethod: new FormControl(''), + xSig: new FormControl(''), + ySig: new FormControl(''), + }); + showLineouts = true; + showStats = true; + beamPaths = [ + 'CU_HXR', + 'CU_SXR', + 'SC_DIAG0', + 'SC_BSYD', + 'SC_HXR', + 'SC_SXR', + ]; + cameras = [ + 'VCCB', + ]; + colormaps = [ + 'Inferno', + 'Viridis', + ]; + methods = [ + 'Gaussian', + 'Assymetric', + 'RMS raw', + 'RMS cut peak', + 'RMS cut area', + 'RMS floor', + ]; + bitdepth = [ + 8, 9, 10, 11, 12, 13, 14, 15, 16, + ]; + + constructor(dataService: AppDataService) { + this.heatmapData = dataService.heatmapData; + } + + toggleLineouts() { + this.showLineouts = ! this.showLineouts; + } + + toggleStats() { + this.showStats = ! this.showStats; + } +} diff --git a/ui/src/assets/.gitkeep b/ui/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/ui/src/favicon.ico b/ui/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + Profile Monitor + + + + + + + + diff --git a/ui/src/main.ts b/ui/src/main.ts new file mode 100644 index 0000000..be6bfab --- /dev/null +++ b/ui/src/main.ts @@ -0,0 +1,9 @@ +/// + +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/ui/src/styles.css b/ui/src/styles.css new file mode 100644 index 0000000..7bdf301 --- /dev/null +++ b/ui/src/styles.css @@ -0,0 +1,30 @@ +/* You can add global styles to this file, and also import other style files */ + +body { + margin: 1em; +} + +g.tick text { + font-size: 13px; +} + +.sr-x-axis-grid, .sr-y-axis-grid { + stroke-opacity: 0.1; +} + +.sr-x-axis-grid text, .sr-y-axis-grid text { + display: none; +} + +.sr-x-axis line, .sr-y-axis line, .sr-x-axis-grid line, .sr-y-axis-grid line { + shape-rendering: crispEdges; +} + +.sr-x-axis-label, .sr-y-axis-label { + font-size: 14px; +} + +.sr-mouse-rect-xy, .sr-mouse-rect-x, .sr-mouse-rect-y { + pointer-events: all; + fill: none; +} diff --git a/ui/tsconfig.app.json b/ui/tsconfig.app.json new file mode 100644 index 0000000..ec26f70 --- /dev/null +++ b/ui/tsconfig.app.json @@ -0,0 +1,16 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [ + "@angular/localize" + ] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/ui/tsconfig.json b/ui/tsconfig.json new file mode 100644 index 0000000..ed966d4 --- /dev/null +++ b/ui/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/ui/tsconfig.spec.json b/ui/tsconfig.spec.json new file mode 100644 index 0000000..c63b698 --- /dev/null +++ b/ui/tsconfig.spec.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine", + "@angular/localize" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}