fix #7285 improve plot legend markers (#7286)

radiasoft · Sep 27, 2024 · 8d2a719 · 8d2a719
1 parent c3d2c2c
commit 8d2a719
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/sirepo/package_data/static/js/sirepo-plotting.js b/sirepo/package_data/static/js/sirepo-plotting.js
@@ -2290,7 +2290,7 @@ SIREPO.app.directive('popupReport', function(focusPointService, plotting) {
                   data-is-dynamic="1"></span> = {{ pointText(0, true) }} {{ focusPoints[0].config.xAxis.units }}</div>
                 <div data-ng-style="{ opacity: opacity($index) }" style="height: 20px"
                   data-ng-repeat="p in plots track by p._label + $index">
-                  <div style="display:inline" data-color-circle="p.color" data-dashed="p.dashes"></div>
+                  <div style="display:inline" data-color-circle="p"></div>
                   <span data-text-with-math="p._label"></span> = {{ pointText($index) }} {{ p._units }}
                 </div>
                 </div>
@@ -3515,17 +3515,17 @@ SIREPO.app.directive('colorCircle', function() {
     return {
         resize: 'A',
         scope: {
-            color: '<colorCircle',
-            dashed: '<',
+            plot: '<colorCircle',
         },
         template: `
-          <div data-ng-style="{ background: bgcolor }" style="display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-bottom: -2px"> </div>
+              <svg width="30" height="10">
+                <line x1="0" y1="4" x2="30" y2="4"
+                  data-ng-attr-stroke-width="{{ plot.strokeWidth }}"
+                  data-ng-attr-opacity="{{ plot.opacity || 1.0 }}"
+                  data-ng-attr-stroke="{{ plot.color }}"
+                  data-ng-attr-stroke-dasharray="{{ plot.dashes }}" />
+              </svg>
         `,
-        controller: function($scope) {
-            $scope.bgcolor = $scope.dashed
-                ? `linear-gradient(90deg, ${$scope.color} 38%, transparent 38%, transparent 62%, ${$scope.color} 62%)`
-                : $scope.color;
-        },
     };
 });
 
@@ -3542,7 +3542,7 @@ SIREPO.app.directive('plotLegend', function(mathRendering) {
               <div data-ng-repeat="p in plots" style="margin-left: 1em">
                 <div data-ng-click="click($index)" style="cursor: pointer; display: inline">
                   <a href data-ng-style="{ opacity: opacity(p) }"><span class="glyphicon" data-ng-class="{'glyphicon-check': p._isVisible, 'glyphicon-unchecked': ! p._isVisible}"> </span></a>
-                  <div style="display:inline" data-color-circle="p.color" data-dashed="p.dashes"></div>
+                  <div style="display:inline" data-color-circle="p"></div>
                   <span data-text-with-math="label(p)" data-is-dynamic="1"></span>
                 </div>
               </div>
@@ -3680,7 +3680,7 @@ SIREPO.app.directive('parameterPlot', function(appState, focusPointService, layo
                     plot._yaxis = appState.applicationState()[$scope.modelName][plot.dim + 'Position'] || 'left';
                     if (plot._yaxis == 'right') {
                         hasY2Axis = true;
-                        plot.dashes = '5 5';
+                        plot.dashes = '5 3';
                     }
                 });
                 if (hasY2Axis) {
@@ -3734,7 +3734,7 @@ SIREPO.app.directive('parameterPlot', function(appState, focusPointService, layo
                 viewport.selectAll('.line').remove();
                 viewport.selectAll('g.param-plot').remove();
                 json.plots.forEach(function(plot, ip) {
-                    let strokeWidth = plot.strokeWidth || 2.0;
+                    plot.strokeWidth = plot.strokeWidth || 2.0;
                     if (plot.style === 'scatter') {
                         let clusterInfo;
                         let circleRadius = plot.circleRadius || 2;
@@ -3764,7 +3764,7 @@ SIREPO.app.directive('parameterPlot', function(appState, focusPointService, layo
                             .attr('class', 'param-plot line line-color')
                             .attr('data-sr-index', ip)
                             .style('stroke', plot.color)
-                            .style('stroke-width', strokeWidth)
+                            .style('stroke-width', plot.strokeWidth)
                             .datum(plot.points);
                         if (plot.dashes) {
                             p.style('stroke-dasharray', (plot.dashes));

diff --git a/sirepo/template/canvas.py b/sirepo/template/canvas.py
@@ -239,13 +239,13 @@ def sim_frame_sigmaAnimation(frame_args):
             PKDict(
                 label="elegant sigma x [m]",
                 points=elegant.sx,
-                strokeWidth=10,
+                strokeWidth=7,
                 opacity=0.5,
             ),
             PKDict(
                 label="elegant sigma y [m]",
                 points=elegant.sy,
-                strokeWidth=10,
+                strokeWidth=7,
                 opacity=0.5,
             ),
             PKDict(label="impactx sigma x [m]", points=impactx.sx),
@@ -345,25 +345,25 @@ def sim_frame_twissAnimation(frame_args):
             ),
             PKDict(
                 label="impactx beta x [m]",
+                strokeWidth=3,
+                opacity=0.7,
                 points=impactx.bx,
             ),
             PKDict(
                 label="impactx beta y [m]",
+                strokeWidth=3,
+                opacity=0.7,
                 points=impactx.by,
             ),
             PKDict(
                 label="madx beta x [m]",
                 points=madx.bx,
-                # strokeWidth=15,
-                # opacity=0.3,
-                dashes="5 5",
+                dashes="5 3",
             ),
             PKDict(
                 label="madx beta y [m]",
                 points=madx.by,
-                # strokeWidth=15,
-                # opacity=0.3,
-                dashes="5 5",
+                dashes="5 3",
             ),
         ],
         model=frame_args,