for #15 rough server side for Screen app

slicops/app/screen.py

@@ -0,0 +1,116 @@
+"""Screen (Profile Monitor) implementation
+
+:copyright: Copyright (c) 2024 The Board of Trustees of the Leland Stanford Junior University, through SLAC National Accelerator Laboratory (subject to receipt of any required approvals from the U.S. Dept. of Energy).  All Rights Reserved.
+:license: http://github.com/slaclab/slicops/LICENSE
+"""
+
+from pykern.pkcollections import PKDict
+
+def new_implementation(args):
+    return Screen(**args)
+
+class Screen(PKDict):
+    """Implementation for the Screen (Profile Monitor) application
+    """
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+    def action(self):
+        pass
+
+    def default_instance(self):
+        #TODO(pjm): dummy data
+        return PKDict(
+            screen=PKDict(
+                beam_path='SC_HXR',
+                camera='VCCB',
+                pv='CAMR:LGUN:950',
+                curve_fit_method='gaussian',
+                camera_image=None,
+                acquire_button=None,
+                stop_button=None,
+            ),
+        )
+
+    def schema(self):
+        #TODO(pjm): schema could be pulled from a file
+        return PKDict(
+            constants=PKDict(
+                BeamPath=[
+                    #TODO(pjm): dummy data, should be generated from yaml or csv sources
+                    PKDict(
+                        name='CU_HXR',
+                        screens=[
+                            ['OTR11', 'OTRS:LI21:237'],
+                            ['OTR12', 'OTRS:LI21:291'],
+                            ['OTR2', 'OTRS:IN20:571'],
+                            ['OTR21', 'OTRS:LI24:807'],
+                            ['OTR3', 'OTRS:IN20:621'],
+                            ['OTR30', 'OTRS:LTU1:449'],
+                            ['OTR33', 'OTRS:LTUH:745'],
+                            ['OTR4', 'OTRS:IN20:711'],
+                            ['OTRDMP', 'OTRS:DMPH:695'],
+                            ['OTRH1', 'OTRS:IN20:465'],
+                            ['OTRH2', 'OTRS:IN20:471'],
+                            ['VCC', 'CAMR:IN20:186'],
+                            ['YAG01', 'YAGS:IN20:211'],
+                            ['YAG02', 'YAGS:IN20:241'],
+                            ['YAG03', 'YAGS:IN20:351'],
+                            ['YAGPSI', 'YAGS:LTUH:743'],
+                        ],
+                    ),
+                    PKDict(
+                        name='SC_HXR',
+                        screens=[
+                            ['OTR11B', 'PROF:BC1B:470'],
+                            ['OTR21B', 'PROF:BC2B:545'],
+                            ['OTRC006', 'PROF:COL0:535'],
+                            ['OTRDMP', 'OTRS:DMPH:695'],
+                            ['OTRDOG', 'PROF:DOG:195'],
+                            ['VCCB','CAMR:LGUN:950'],
+                            ['YAGH1', 'YAGS:HTR:625'],
+                            ['YAGH2', 'YAGS:HTR:675'],
+                            ['YAGPSI', 'YAGS:LTUH:743'],
+                        ],
+                    ),
+                ],
+                CurveFitMethod=[
+                    ['gaussian', 'Gaussian'],
+                    ['assymetric', 'Assymetric'],
+                    ['rms_raw', 'RMS raw'],
+                    ['rms_cut_peak', 'RMS cut peak'],
+                    ['rms_cut_area', 'RMS cut area'],
+                    ['rms_floor', 'RMS floor'],
+                ],
+            ),
+            model=PKDict(
+                screen=PKDict(
+                    beam_path=['Beam Path', 'BeamPath'],
+                    camera=['Camera', 'Camera'],
+                    pv=['PV', 'CameraPV'],
+                    curve_fit_method=['Curve Fit Method', 'CurveFitMethod', 'gaussian'],
+                    color_map=['Color Map', 'ColorMap', 'Inferno'],
+                    camera_image=['Camera Image', 'CameraImage'],
+                    acquire_button=['Start', 'AcquireButton'],
+                    stop_button=['Stop', 'StopButton'],
+                ),
+            ),
+            view=PKDict(
+                screen=PKDict(
+                    fields=[
+                        [
+                            'beam_path',
+                            'camera',
+                            'pv',
+                            'acquire_button',
+                            'stop_button',
+                            'curve_fit_method',
+                        ],
+                        [
+                            'camera_image',
+                            'color_map',
+                        ],
+                    ],
+                ),
+            ),
+        )

slicops/ui_api.py

@@ -6,6 +6,7 @@
 
 from pykern.pkcollections import PKDict
 from pykern.pkdebug import pkdc, pkdlog, pkdp
+import importlib
 import slicops.quest
 
 
@@ -19,5 +20,23 @@ class UIAPI(slicops.quest.API):
     Or, raise a `pykern.quest.APIError`.
     """
 
+    def _app_implementation(self, api_args):
+        assert 'app_name' in api_args
+        return importlib.import_module(f'slicops.app.{api_args.app_name}').new_implementation(
+            PKDict(
+                api_args=api_args,
+            )
+        )
+
+    async def api_action(self, api_args):
+        return _app_implementation(api_args).action()
+
     async def api_echo(self, api_args):
-        return api_args
+        return self._app_implementation(api_args).api_args.value
+
+    async def api_init_app(self, api_args):
+        a = self._app_implementation(api_args)
+        return PKDict(
+            schema=a.schema(),
+            instance=a.default_instance(),
+        )

ui/src/app/app.component.ts

@@ -4,29 +4,15 @@ import { AppDataService } from './app-data.service';
 @Component({
     selector: 'app-root',
     template: `
-<app-screen></app-screen>
+      <div class="container-fluid">
+        <router-outlet></router-outlet>
+      </div>
     `,
     styles: [],
 })
 export class AppComponent {
     title = 'slicops';
 
-    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) {

ui/src/app/heatmap-with-lineouts/heatmap-with-lineouts.component.ts

@@ -279,29 +279,46 @@ export class HeatmapWithLineoutsComponent {
         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)));
 
+        //TODO(pjm): this will move to the server
+        const xLineout = [...this.data[0]];
+        for (let i = 1; i < this.data.length; i++) {
+            for (let j = 0; j < this.data[0].length; j++) {
+                xLineout[j] += this.data[i][j];
+            }
+        }
+        const yLineout = this.data.map((r) => r[0]);
+        for (let i = 0; i < this.data.length; i++) {
+            for (let j = 1; j < this.data[0].length; j++) {
+                yLineout[i] += this.data[i][j];
+            }
+        }
+
         this.yxScale
         //TODO(pjm): data min/max
-            .domain([0, 260])
+            .domain([0, d3.max(yLineout) as number])
             .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])
+            .domain([0, d3.max(xLineout) as number])
             .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) => {
+        //const xdata = this.data[Math.round(this.data.length / 2)].map((v, idx) => {
+        const xdata = xLineout.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
@@ -310,10 +327,12 @@ export class HeatmapWithLineoutsComponent {
         const yline = d3.line()
               .x((d) => this.yxScale(d[1]))
               .y((d) => this.yZoomScale(d[0] + yoff));
-        const ydata = this.data.map((v, idx) => {
+        //const ydata = this.data.map((v, idx) => {
+        const ydata = yLineout.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)],
+                //v[Math.round(v.length / 2)],
+                v,
             ];
         });
         this.select('.sr-y-overlay path').datum(ydata).attr('d', yline);

ui/src/app/screen/screen.component.ts

@@ -12,7 +12,6 @@ import { APIService } from '../api.service';
 @Component({
     selector: 'app-screen',
     template: `
-<div class="container-fluid">
   <div class="row">
     <div class="col-sm-3 ">
 
@@ -96,11 +95,11 @@ import { APIService } from '../api.service';
     </div>
 
   </div>
-</div>
     `,
     styles: [],
 })
 export class ScreenComponent {
+    readonly APP_NAME: string = 'screen';
     heatmapData: number[][];
     echoReply: string = "";
     showStats = true;
@@ -135,22 +134,36 @@ export class ScreenComponent {
         console.log("constructor ScreenComponent");
         this.heatmapData = dataService.heatmapData;
         this.apiService = apiService;
+
+        this.apiService.call('init_app', {
+            app_name: this.APP_NAME,
+        }).subscribe({
+            next: (result) => {
+                console.log('init_app result:', result);
+            },
+            error: this.handleError,
+        });
+
     }
 
     echoCall() {
         console.log("echoCall");
-        this.apiService.call('echo', 'hello').subscribe({
+        this.apiService.call('echo', {
+            app_name: this.APP_NAME,
+            value: 'hello',
+        }).subscribe({
             next: (result) => {
                 this.echoReply = result;
                 console.log('reply', result);
             },
-            error: (err) => {
-                this.echoReply = "error=" + err;
-                console.log('error', err);
-            },
+            error: this.handleError,
         });
     }
 
+    handleError(err: any) {
+        console.log('error:', err);
+    }
+
     toggleStats() {
         this.showStats = ! this.showStats;
     }