fix #7217 Impact-T input file parser (#7234)

* fix #7217 added ImpactT parser - added ImpactT particle file input - display WRITE_BEAM output in beamline order - KaTeX parameter plot labels - reportPopup now in html - move dark mode to separate css file sirepo-dark.css - parameter plot y2 plot axis - parameter plot limits
radiasoft · Sep 3, 2024 · 59b71d0 · 59b71d0
1 parent fef0fd3
commit 59b71d0
Show file tree

Hide file tree

Showing 35 changed files with 1,032 additions and 987 deletions.
diff --git a/sirepo/package_data/static/css/lattice.css b/sirepo/package_data/static/css/lattice.css
@@ -134,3 +134,19 @@ div.sr-lattice-icon-disabled span {
   max-width: none;
   width: 25em;
 }
+
+.sr-lattice-watch {
+  stroke: black;
+  stroke-width: 0.01;
+}
+
+.sr-selected-badge {
+  background-color: #fcf8e3;
+  color: #333;
+  border: 1px solid #777;
+}
+
+.sr-lattice-marker > path {
+  stroke: black;
+  stroke-width: 1;
+}
diff --git a/sirepo/package_data/static/css/omega.css → ...o/package_data/static/css/sirepo-dark.css b/sirepo/package_data/static/css/omega.css → ...o/package_data/static/css/sirepo-dark.css
@@ -6,10 +6,14 @@
   --sr-item-user-dark-mode: #46c246;
   --sr-link-dark-mode: #5da1e1;
   --sr-link-hover-dark-mode: #fff;
-  --sr-panel-bg-dark-mode: #333;
+  --sr-panel-heading-bg-dark-mode: #282c31;
+  --sr-panel-bg-dark-mode: #000;
   --sr-panel-border-dark-mode: #999;
-  --sr-panel-control-dark-mode: #444;
+  --sr-panel-control-dark-mode: #21252a;
   --sr-panel-text-dark-mode: #eee;
+  --sr-input-error-dark-mode: #430101;
+  --sr-table-border-dark-mode: #3d444db3;
+  --sr-body-color-dark-mode: #f0f6fc;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -27,6 +31,7 @@
   }
 
   body {
+    color: var(--sr-body-color-dark-mode);
     background-color: var(--sr-bg-dark-mode);
   }
 
@@ -44,12 +49,6 @@
   svg.sr-plot g.axis > path {
     stroke: var(--sr-panel-text-dark-mode);
   }
-  svg.sr-plot g.sr-plot-legend-item > text {
-    fill: var(--sr-link-dark-mode);
-  }
-  svg.sr-plot g.sr-plot-legend-item > text.focus-text {
-    fill: var(--sr-link-dark-mode);
-  }
   svg.sr-plot g.text-block > text#x-text {
     fill: var(--sr-panel-text-dark-mode) !important;
   }
@@ -75,11 +74,18 @@
     border-color: var(--sr-panel-border-dark-mode);
     border-bottom-color: transparent;
   }
+  app-header-right-sim-loaded .nav-tabs > li.sim-section > a:hover {
+    background-color: transparent;
+  }
 
   .btn-default {
     background-color: var(--sr-panel-control-dark-mode);
     color: var(--sr-item-active-dark-mode);
   }
+  .btn-default:hover {
+    background-color: var(--sr-item-focused-bg-dark-mode);
+    color: var(--sr-item-active-dark-mode);
+  }
 
   .dropdown-menu {
     background-color: var(--sr-panel-bg-dark-mode);
@@ -140,12 +146,18 @@
   .panel-info {
     border-color: var(--sr-panel-border-dark-mode);
   }
+  .modal-content {
+    border-color: var(--sr-panel-border-dark-mode);
+  }
+  .modal-backdrop.in {
+    opacity: 0.7;
+  }
   .panel-info > .panel-heading {
     border-color: var(--sr-panel-border-dark-mode);
-    background-color: var(--sr-panel-bg-dark-mode);
+    background-color: var(--sr-panel-heading-bg-dark-mode);
   }
   .bg-warning, .bg-info {
-    background-color: var(--sr-panel-bg-dark-mode);
+    background-color: var(--sr-panel-heading-bg-dark-mode);
   }
   button.close {
     color: var(--sr-panel-color);
@@ -156,6 +168,10 @@
     opacity: 1;
   }
 
+  .progress {
+    background-color: var(--sr-panel-heading-bg-dark-mode);
+  }
+
   .report-window {
     fill: var(--sr-item-bg-dark-mode) !important;
     stroke: var(--sr-panel-border-dark-mode) !important;
@@ -215,4 +231,63 @@
   .table-hover > tbody > tr:hover {
     background-color: var(--sr-item-bg-dark-mode);
   }
+
+  .sr-panel-loading .sr-panel-wait, .sr-panel-waiting .sr-panel-wait {
+    background-color: var(--sr-panel-heading-bg-dark-mode);
+  }
+
+  .nav-tabs > li.active > a,
+  .nav-tabs > li.active > a:hover,
+  .nav-tabs > li.active > a:focus {
+    background-color: var(--sr-bg-dark-mode);
+    color: var(--sr-item-active-dark-mode);
+  }
+
+  .nav > li > a:hover,
+  .nav > li > a:focus {
+    background-color: transparent;
+  }
+
+  .toggle-group label.toggle-on {
+    background-color: var(--sr-panel-heading-bg-dark-mode);
+  }
+  .toggle.btn {
+    border-color: #ccc;
+  }
+  .toggle-group label.btn-default.toggle-off {
+    color: var(--sr-panel-text-dark-mode);
+    background-color: var(--sr-bg-dark-mode);
+  }
+
+  .sr-lattice-watch {
+    stroke: white;
+    stroke-width: 0.01;
+  }
+
+  .sr-screenshot {
+    background-color: var(--sr-bg-dark-mode);
+  }
+
+  input.ng-invalid.ng-dirty {
+    background-color: var(--sr-input-error-dark-mode);
+  }
+  .btn-invalid {
+    background-color: var(--sr-input-error-dark-mode);
+  }
+
+  .table > tbody > tr > td {
+    border-top-color: var(--sr-table-border-dark-mode);
+  }
+  .table > thead > tr > th {
+    border-bottom-color: var(--sr-table-border-dark-mode);
+    color: var(--sr-panel-color);
+  }
+  .table > tbody > tr.active > td {
+    background-color: var(--sr-item-active-dark-mode);
+    color: var(--sr-bg-dark-mode);
+  }
+
+  .sr-lattice-marker > path {
+    stroke: var(--sr-panel-text-dark-mode);
+  }
 }
diff --git a/sirepo/package_data/static/css/sirepo.css b/sirepo/package_data/static/css/sirepo.css
@@ -388,7 +388,6 @@
     .sr-plot .axis text.sr-svg-result {
       fill: #8a8a8a;
       font-size: 16px;
-      font-weight: bold;
     }
 
     .sr-plot text.sr-svg-label {
@@ -420,14 +419,17 @@
     .sr-plot text.z-axis-label,
     .sr-plot text.y-axis-label,
     .sr-plot text.x-axis-label,
-    .sr-plot text.frequency-label {
+    .sr-plot text.frequency-label,
+    .y-axis-label
+    {
       font-size: 14px;
-      font-weight: bold;
       text-anchor: middle;
     }
+    .sr-plot .katex {
+      font-size: 18px;
+    }
     .sr-plot .main-title {
       font-size: 18px;
-      font-weight: bold;
       text-anchor: middle;
     }
     .sr-plot .sub-title {
@@ -564,37 +566,6 @@
     .sr-plot .x-base, .sr-plot .y-base {
       font-size: 13px;
     }
-    .sr-plot .popup-report {
-        display: none;
-    }
-    .sr-plot .popup-group {
-        fill: white;
-    }
-    .sr-plot .popup-group .report-window {
-        fill: rgba(255, 255, 255, 0.90);
-        stroke: blue;
-    }
-    .sr-plot .popup-group .report-window-title-bar {
-        fill: rgba(221, 237, 246, 0.9);
-        stroke: none;
-        cursor: move;
-    }
-
-    .sr-plot .popup-group .report-window-title-icon {
-        fill: #222;
-        cursor: pointer;
-        user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        -webkit-user-select: none;
-    }
-    .sr-plot .popup-group .report-window-close {
-    }
-    .sr-plot .popup-group .report-window-copy {
-        font-family: "Glyphicons Halflings";
-        fill: #337ab7;
-    }
-
 
     .sr-plot .plot-visibility {
         cursor: pointer;
@@ -624,9 +595,10 @@
     @media (max-width: 767px) {
       div.sr-plot .z-axis-label,
       div.sr-plot .y-axis-label,
-      div.sr-plot .x-axis-label {
+      div.sr-plot .x-axis-label,
+      .y-axis-label
+      {
         font-size: 12px;
-        font-weight: bold;
         text-anchor: middle;
       }
       div.sr-plot .main-title {
@@ -635,6 +607,9 @@
       div.sr-plot .focus-text {
         font-size: 12px;
       }
+      .sr-plot .katex {
+        font-size: 16px;
+      }
     }
 
 
@@ -1044,9 +1019,6 @@ label .katex {
   font-size: 16px;
   font-weight: normal;
 }
-.latex-title .katex {
-    font-size: 18px;
-}
 
 .sr-disabled-item {
   background-color: lightgray !important;

diff --git a/sirepo/package_data/static/html/impactt-source.html b/sirepo/package_data/static/html/impactt-source.html
@@ -1,9 +1,9 @@
 <div class="container-fluid">
   <div class="row">
-    <div class="col-md-6 col-xl-4">
+    <div class="col-md-6">
       <div data-basic-editor-panel="" data-view-name="beam"></div>
     </div>
-    <div class="col-md-6 col-xl-4">
+    <div class="col-md-6">
       <div data-basic-editor-panel="" data-view-name="distribution"></div>
     </div>
 </div>
diff --git a/sirepo/package_data/static/html/impactt-visualization.html b/sirepo/package_data/static/html/impactt-visualization.html
@@ -8,11 +8,13 @@
           <div data-sim-status-panel="visualization.simState"></div>
       </div>
     </div>
-    <div class="col-md-6 col-xl-4" data-ng-if="visualization.simState.getFrameCount() >= 1">
+    <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" data-column-for-aspect-ratio="{{ item.modelAccess.modelKey }}" data-ng-if="visualization.simState.hasFrames()">
-      <div data-report-panel="{{ item.modelAccess.getData().plotType }}" data-model-data="item.modelAccess" data-panel-title="{{ item.panelTitle }}"></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>

diff --git a/sirepo/package_data/static/html/lattice.html b/sirepo/package_data/static/html/lattice.html
@@ -26,7 +26,7 @@
               <g ng-repeat="item in ::group.items track by item.trackHash" ng-switch="::item.picType" ng-click="itemClicked(item.element)" ng-dblclick="itemDblClicked(item.element)">
                 <polygon ng-switch-when="bend" ng-attr-class="{{ ::item.element.indexClass }}" ng-attr-points="{{::item.points[0][0] +',' + item.points[0][1] + ' ' + item.points[1][0] + ',' + item.points[1][1] + ' ' + item.points[2][0] + ',' + item.points[2][1] + ' ' + item.points[3][0] + ',' + item.points[3][1] }}" ng-attr-style="fill: {{ ::item.color }}"><title>{{ ::item.title }}</title></polygon>
                 <g ng-switch-when="watch" ng-attr-transform="translate({{ ::item.x }},{{ ::item.y }})">
-                  <path ng-attr-class="{{ ::item.element.indexClass }}" ng-attr-transform="scale({{ item.subScaling().x }}, {{ item.subScaling().y }})" ng-attr-d="{{ ::'M0 0 L 0 ' + -item.height + ' L 0.25 -0.875 L 0 -0.75' }}" ng-attr-style="stroke: black; fill: {{ ::item.color}}; stroke-width: 0.01"><title>{{ ::item.title }}</title></path>
+                  <path ng-attr-class="sr-lattice-watch {{ ::item.element.indexClass }}" ng-attr-transform="scale({{ item.subScaling().x }}, {{ item.subScaling().y }})" ng-attr-d="{{ ::'M0 0 L 0 ' + -item.height + ' L 0.25 -0.875 L 0 -0.75' }}" ng-attr-style="fill: {{ ::item.color}};"><title>{{ ::item.title }}</title></path>
                 </g>
                 <g ng-switch-when="undulator">
                   <rect ng-attr-class="{{ ::item.element.indexClass }}" ng-attr-x="{{ ::item.x }}" ng-attr-y="{{ ::item.y }}" ng-attr-width="{{ ::item.width }}" ng-attr-height="{{ ::item.height }}" ng-attr-style="fill: {{ ::item.color }}"><title>{{ ::item.title }}</title></rect>
@@ -60,8 +60,8 @@
           </g>
         </g>
       </g>
-      <g data-ng-if="markerUnits" ng-attr-transform="translate({{ width - margin - 40 }},{{ height - margin - 15 }})">
-        <path ng-attr-d="{{ 'M-' + markerWidth + ' -26 L -' + markerWidth + ' 14 M-' + markerWidth + ' -6 L 0 -6 M 0 -26 L 0 14' }}" style="stroke: black; stroke-width: 1" />
+      <g class="sr-lattice-marker" data-ng-if="markerUnits" ng-attr-transform="translate({{ width - margin - 40 }},{{ height - margin - 15 }})">
+        <path ng-attr-d="{{ 'M-' + markerWidth + ' -26 L -' + markerWidth + ' 14 M-' + markerWidth + ' -6 L 0 -6 M 0 -26 L 0 14' }}" />
         <text dx="5" style="font-size: 12px">{{ markerUnits }}</text>
       </g>
   </svg></div>

diff --git a/sirepo/package_data/static/html/particle3d.html b/sirepo/package_data/static/html/particle3d.html
@@ -1,7 +1,7 @@
 <div data-ng-class="{'sr-plot-loading': isLoading(), 'sr-plot-cleared': dataCleared}">
   <div class="sr-plot sr-plot-particle-3d">
 
-    <div class=".sr-plot-legend .plot-visibility">
+    <div class="plot-visibility">
         <div class="row">
             <div class="col-sm-6">
               <div>