fix #7152 new "canvas" app for lattice code comparisons (#7265)

- update svg drawing if sbend e1 or e2 changes - madx particle file import from openPMD - elegant openPMD particle file - alpha version of impactx app
radiasoft · Sep 23, 2024 · 051f61f · 051f61f
1 parent 5109a2d
commit 051f61f
Show file tree

Hide file tree

Showing 62 changed files with 8,333 additions and 2,067 deletions.
diff --git a/sirepo/feature_config.py b/sirepo/feature_config.py
@@ -42,8 +42,10 @@
 #: Codes on dev, alpha, and beta
 _NON_PROD_FOSS_CODES = frozenset(
     (
+        "canvas",
         "epicsllrf",
         "impactt",
+        "impactx",
         "myapp",
         "hellweg",
     )

diff --git a/sirepo/package_data/static/html/canvas-comparison.html b/sirepo/package_data/static/html/canvas-comparison.html
@@ -0,0 +1,29 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-6 col-xl-4">
+      <div data-basic-editor-panel="" data-view-name="simulationSettings"></div>
+    </div>
+    <div class="col-md-6 col-xl-4">
+      <div data-simple-panel="simulationStatus">
+        <div data-sim-status-panel="comparison.simState"></div>
+      </div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="col-md-6" data-ng-if="comparison.simState.hasFrames()">
+      <div data-report-panel="parameterWithLattice" data-model-name="sigmaAnimation"></div>
+    </div>
+    <div class="col-md-6" data-ng-if="comparison.simState.hasFrames()">
+      <div data-report-panel="parameterWithLattice" data-model-name="twissAnimation"></div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="col-md-4" data-ng-if="comparison.simState.hasFrames()">
+      <div data-report-panel="heatmap" data-model-name="bunchAnimation1"></div>
+    </div>
+    <div class="col-md-4" data-ng-if="comparison.simState.hasFrames()">
+      <div data-report-panel="heatmap" data-model-name="bunchAnimation2"></div>
+    </div>
+    <div class="col-md-4" data-ng-if="comparison.simState.hasFrames()">
+      <div data-report-panel="heatmap" data-model-name="bunchAnimation3"></div>
+    </div>
+  </div>
+</div>
diff --git a/sirepo/package_data/static/html/elegant-source.html b/sirepo/package_data/static/html/elegant-source.html
@@ -4,15 +4,18 @@
       <div data-ng-show="source.isBunchSource('bunched_beam')" data-basic-editor-panel="" data-view-name="bunch"></div>
       <div data-ng-show="source.isBunchSource('sdds_beam')" data-basic-editor-panel="" data-view-name="bunchFile"></div>
     </div>
-    <div class="clearfix"></div>
-    <div data-ng-repeat="item in source.bunchReports track by item.id">
-      <div class="col-md-6 col-xl-4">
-        <div data-report-panel="heatmap" data-model-name="bunchReport" data-model-data="item" data-panel-title="{{ source.bunchReportHeading(item) }}"></div>
+    <div class="col-md-12 col-xl-8">
+      <div class="row">
+        <div data-ng-repeat="item in source.bunchReports track by item.id">
+          <div class="col-md-6">
+            <div data-report-panel="heatmap" data-model-name="bunchReport" data-model-data="item" data-panel-title="{{ source.bunchReportHeading(item) }}"></div>
+          </div>
+          <div data-ng-if="$index % 2" class="clearfix"></div>
+        </div>
       </div>
-      <div data-ng-if="$index % 2" class="clearfix hidden-xl"></div>
     </div>
-  </div> <!-- /row -->
-</div> <!-- /container -->
+  </div>
+</div>
 
 <!-- modal dialogs -->
 <div data-modal-editor="" view-name="bunchReport" data-ng-repeat="item in source.bunchReports track by item.id" data-model-data="item"></div>
diff --git a/sirepo/package_data/static/html/impactx-visualization.html b/sirepo/package_data/static/html/impactx-visualization.html
@@ -0,0 +1,22 @@
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-6 col-xxl-4">
+      <div data-basic-editor-panel="" data-view-name="simulationSettings"></div>
+    </div>
+    <div class="col-md-6 col-xxl-4">
+      <div data-simple-panel="simulationStatus">
+          <div data-sim-status-panel="visualization.simState"></div>
+      </div>
+    </div>
+    <div data-column-for-aspect-ratio="statAnimation" data-ng-if="visualization.simState.getFrameCount() >= 1">
+      <div data-report-panel="parameterWithLattice" data-model-name="statAnimation"></div>
+    </div>
+    <div data-ng-repeat="item in visualization.outputFiles track by $index" data-ng-if="visualization.simState.hasFrames()">
+      <div data-column-for-aspect-ratio="{{ item.modelAccess.modelKey }}">
+        <div data-report-panel="{{ item.modelAccess.getData().plotType }}" data-model-data="item.modelAccess" data-panel-title="{{ item.panelTitle }}"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div data-modal-editor="" view-name="elementAnimation" data-ng-repeat="item in visualization.outputFiles" data-model-data="item.modelAccess">
diff --git a/sirepo/package_data/static/html/madx-source.html b/sirepo/package_data/static/html/madx-source.html
@@ -3,13 +3,17 @@
     <div class="col-md-6 col-xl-4">
       <div data-basic-editor-panel="" data-view-name="bunch"></div>
     </div>
-    <div data-ng-repeat="item in source.reports() track by item.modelKey">
-      <div class="col-md-6 col-xl-4">
-        <div data-report-panel="{{ source.plotType() }}" data-model-name="{{ source.reportModel() }}" data-model-data="item" data-panel-title="{{ source.headings()(item) }}"></div>
+    <div class="col-md-12 col-xl-8">
+      <div class="row">
+        <div data-ng-repeat="item in source.bunchReports track by item.modelKey">
+          <div class="col-md-6">
+            <div data-report-panel="heatmap" data-model-name="bunchReport" data-model-data="item" data-panel-title="{{ source.bunchReportHeading(item) }}"></div>
+          </div>
+          <div data-ng-if="$index % 2" class="clearfix"></div>
+        </div>
       </div>
-      <div data-ng-if="$index == 0" class="hidden-xl clearfix"></div>
     </div>
   </div>
 </div>
 
-<div data-modal-editor="" view-name="{{ source.reportModel() }}" data-ng-repeat="item in source.reports() track by item.id" data-parent-controller="source" data-model-data="item"></div>
+<div data-modal-editor="" view-name="bunchReport" data-ng-repeat="item in source.bunchReports track by item.id" data-parent-controller="source" data-model-data="item"></div>
diff --git a/sirepo/package_data/static/js/canvas.js b/sirepo/package_data/static/js/canvas.js
@@ -0,0 +1,114 @@
+'use strict';
+
+var srlog = SIREPO.srlog;
+var srdbg = SIREPO.srdbg;
+
+SIREPO.app.config(() => {
+    SIREPO.lattice = {
+        canReverseBeamline: true,
+        elementColor: {
+            OCTUPOLE: 'yellow',
+            QUADRUPOLE: 'red',
+            SEXTUPOLE: 'lightgreen',
+        },
+        elementPic: {
+            aperture: ['APERTURE'],
+            bend: ['SBEND'],
+            drift: ['DRIFT'],
+            magnet: ['KICKER', 'MULTIPOLE', 'QUADRUPOLE', 'SEXTUPOLE'],
+            rf: ['RFCAVITY'],
+            solenoid: ['SOLENOID'],
+            watch: ['MONITOR'],
+            zeroLength: [],
+        },
+    };
+    SIREPO.FILE_UPLOAD_TYPE = {
+        'distribution.distributionFile': '.h5',
+    };
+});
+
+SIREPO.app.factory('canvasService', function(appState) {
+    const self = {};
+    appState.setAppService(self);
+    self.computeModel = analysisModel => 'animation';
+    return self;
+});
+
+SIREPO.app.directive('appFooter', function() {
+    return {
+        restrict: 'A',
+        scope: {
+            nav: '=appFooter',
+        },
+        template: `
+            <div data-common-footer="nav"></div>
+            <div data-elegant-import-dialog="" data-is-mad-x-only="1"></div>
+        `,
+    };
+});
+
+SIREPO.app.directive('appHeader', function(canvasService) {
+    return {
+        restrict: 'A',
+        scope: {
+            nav: '=appHeader',
+        },
+        template: `
+            <div data-app-header-brand="nav"></div>
+            <div data-app-header-left="nav"></div>
+            <div data-app-header-right="nav">
+              <app-header-right-sim-loaded>
+                <div data-sim-sections="">
+                  <li class="sim-section" data-ng-class="{active: nav.isActive('lattice')}"><a href data-ng-click="nav.openSection('lattice')"><span class="glyphicon glyphicon-option-horizontal"></span>  Lattice</a></li>
+                  <li class="sim-section" data-ng-class="{active: nav.isActive('source')}"><a href data-ng-click="nav.openSection('source')"><span class="glyphicon glyphicon-flash"></span> Source</a></li>
+                  <li class="sim-section" data-ng-class="{active: nav.isActive('comparison')}"><a href data-ng-click="nav.openSection('comparison')">Comparison</a></li>
+                </div>
+              </app-header-right-sim-loaded>
+              <app-settings>
+              </app-settings>
+              <app-header-right-sim-list>
+                <ul class="nav navbar-nav sr-navbar-right">
+                  <li><a href data-ng-click="nav.showImportModal()"><span class="glyphicon glyphicon-cloud-upload"></span> Import</a></li>
+                </ul>
+              </app-header-right-sim-list>
+            </div>
+        `,
+    };
+});
+
+SIREPO.app.controller('LatticeController', function(latticeService) {
+    var self = this;
+    self.latticeService = latticeService;
+    self.advancedNames = [];
+    self.basicNames = [
+        "APERTURE",
+        "DRIFT",
+        "KICKER",
+        "MONITOR",
+        "MULTIPOLE",
+        "QUADRUPOLE",
+        "RFCAVITY",
+        "SBEND",
+        "SEXTUPOLE",
+        "SOLENOID"
+    ];
+});
+
+SIREPO.app.controller('SourceController', function(latticeService) {
+    const self = this;
+    latticeService.initSourceController(self);
+});
+
+SIREPO.app.controller('ComparisonController', function(frameCache, persistentSimulation, $scope) {
+    var self = this;
+    self.simScope = $scope;
+    self.errorMessage = '';
+
+    self.simHandleStatus = (data) => {
+        self.errorMessage = data.error;
+        frameCache.setFrameCount(data.frameCount || 0);
+    };
+
+    self.simState = persistentSimulation.initSimulationState(self);
+    self.simState.errorMessage = () => self.errorMessage;
+});
diff --git a/sirepo/package_data/static/js/elegant.js b/sirepo/package_data/static/js/elegant.js
@@ -4,6 +4,9 @@ var srlog = SIREPO.srlog;
 var srdbg = SIREPO.srdbg;
 
 SIREPO.app.config(function() {
+    SIREPO.FILE_UPLOAD_TYPE = {
+        'bunchFile-sourceFile': '.sdds,.h5',
+    };
     SIREPO.PLOTTING_COLOR_MAP = 'afmhot';
     SIREPO.PLOTTING_HEATPLOT_FULL_PIXEL = true;
     SIREPO.appFieldEditors += [

diff --git a/sirepo/package_data/static/js/impactx-util.js b/sirepo/package_data/static/js/impactx-util.js
@@ -0,0 +1,57 @@
+'use strict';
+
+var srlog = SIREPO.srlog;
+var srdbg = SIREPO.srdbg;
+
+SIREPO.app.directive('impactxSourceTab', function() {
+    return {
+        restrict: 'A',
+        scope: {
+            "source": "<",
+        },
+        template: `
+            <div class="container-fluid">
+              <div class="row">
+                <div class="col-md-6 col-xl-4">
+                  <div data-basic-editor-panel="" data-view-name="distribution"></div>
+                </div>
+                <div class="col-md-12 col-xl-8">
+                  <div class="row">
+                    <div data-ng-repeat="item in source.bunchReports track by item.id">
+                      <div class="col-md-6">
+                        <div data-report-panel="heatmap" data-model-name="bunchReport" data-model-data="item" data-panel-title="{{ source.bunchReportHeading(item) }}"></div>
+                      </div>
+                      <div data-ng-if="$index % 2" class="clearfix"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div data-modal-editor="" view-name="bunchReport" data-ng-repeat="item in source.bunchReports track by item.id" data-parent-controller="source" data-model-data="item"></div>
+        `,
+    };
+});
+
+SIREPO.viewLogic('distributionView', function(appState, panelState, $scope) {
+
+    function isSDDS() {
+        return (appState.models.distribution.distributionFile || '').search(/\.sdds$/i) > 0;
+    }
+
+    function updateFields() {
+        const d = appState.models.distribution;
+        panelState.showFields('distribution', [
+            ['k', 'kT', 'kT_halo', 'normalize', 'normalize_halo', 'halo'], d.distributionType == 'Thermal',
+            ['distributionFile'], d.distributionType == 'File',
+            ['species', 'charge'], d.distributionType != 'File' || isSDDS(),
+            ['energy', 'particleCount'], d.distributionType != 'File',
+        ]);
+        panelState.showRow('distribution', 'lambdax', ! ['Thermal', 'File'].includes(d.distributionType));
+
+    }
+    $scope.whenSelected = updateFields;
+    $scope.watchFields = [
+        ['distribution.distributionType', 'distribution.distributionFile'], updateFields,
+    ];
+});