Merge pull request #592 from lsst-ts/tickets/DM-42320

Adjust LOVE M2 force gradient coloring
lsst-ts · Jan 8, 2024 · a61c3e5 · a61c3e5
2 parents 4e5d29f + ad9c022
commit a61c3e5
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 32 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -5,6 +5,7 @@ Version History
 v5.27.11
 --------
 
+* Adjust LOVE M2 force gradient coloring `<https://github.com/lsst-ts/LOVE-frontend/pull/592>`_
 * Add MTM2 powerSystemState data `<https://github.com/lsst-ts/LOVE-frontend/pull/590>`_
 * Remove custom failed script sound alert `<https://github.com/lsst-ts/LOVE-frontend/pull/589>`_
 * OLE visual improvements `<https://github.com/lsst-ts/LOVE-frontend/pull/588>`_

diff --git a/love/src/components/MainTel/M2/Actuators/Actuators.jsx b/love/src/components/MainTel/M2/Actuators/Actuators.jsx
@@ -23,9 +23,8 @@ import PropTypes from 'prop-types';
 import SummaryPanel from 'components/GeneralPurpose/SummaryPanel/SummaryPanel';
 import Toggle from 'components/GeneralPurpose/Toggle/Toggle';
 
-import Inclinometer from './Inclinometer/Inclinometer';
 import Selector from './Selector/Selector';
-import ForceGradiant from './ForceGradiant/ForceGradiant';
+import ForceGradient from './ForceGradient/ForceGradient';
 import Info from './Info/Info';
 import styles from './Actuators.module.css';
 
@@ -136,13 +135,14 @@ export default class Actuators extends Component {
       tangentEncoderPositions,
       tangentForceApplied,
       tangentForceMeasured,
-      minForceLimit,
-      maxForceLimit,
     } = this.props;
 
     const actuatorReferenceId = this.arrayReferenceId().slice(0, 72);
     const actuatorTangentReferenceId = this.arrayReferenceId().slice(0, 6);
 
+    const minForceLimit = Math.min(...axialForceMeasured, ...tangentForceMeasured);
+    const maxForceLimit = Math.max(...axialForceMeasured, ...tangentForceMeasured);
+
     return (
       <div className={styles.actuatorsContainer}>
         <SummaryPanel className={styles.summaryPanelControls}>
@@ -190,15 +190,15 @@ export default class Actuators extends Component {
             />
           </div>
 
-          <div className={styles.inclinometerForcegradiantAndInfoContainer}>
+          <div className={styles.inclinometerForcegradientAndInfoContainer}>
             {/* <div>
               <Inclinometer
                 zenithAngleMeasured={zenithAngleMeasured}
                 inclinationTelemetrySource={inclinationTelemetrySource}
               />
             </div> */}
             <div>
-              <ForceGradiant
+              <ForceGradient
                 actuatorReferenceId={actuatorReferenceId}
                 actuatorTangentReferenceId={actuatorTangentReferenceId}
                 selectedActuator={selectedActuator}

diff --git a/love/src/components/MainTel/M2/Actuators/Actuators.module.css b/love/src/components/MainTel/M2/Actuators/Actuators.module.css
@@ -27,7 +27,7 @@ this program. If not, see <http://www.gnu.org/licenses/>.
   gap: 30px;
 }
 
-.inclinometerForcegradiantAndInfoContainer {
+.inclinometerForcegradientAndInfoContainer {
   display: grid;
   grid-gap: 2em;
   grid-auto-columns: auto;

diff --git a/...Actuators/ForceGradiant/ForceGradiant.jsx → ...Actuators/ForceGradient/ForceGradient.jsx b/...Actuators/ForceGradiant/ForceGradiant.jsx → ...Actuators/ForceGradient/ForceGradient.jsx
@@ -23,9 +23,9 @@ import * as d3 from 'd3';
 import { isEqual, uniqueId } from 'lodash';
 import { defaultNumberFormatter } from 'Utils';
 
-import styles from './ForceGradiant.module.css';
+import styles from './ForceGradient.module.css';
 
-export default class ForceGradiant extends Component {
+export default class ForceGradient extends Component {
   static propTypes = {
     /** Array for the identify of the position in array with an index */
     actuatorReferenceId: PropTypes.arrayOf(PropTypes.number),
@@ -64,12 +64,12 @@ export default class ForceGradiant extends Component {
 
   static COLOURS = ['#2c7bb6', '#00a6ca', '#00ccbc', '#90eb9d', '#ffff8c', '#f9d057', '#f29e2e', '#e76818', '#d7191c'];
 
-  static COLOUR_RANGE = [...d3.range(0, 1, 1.0 / (ForceGradiant.COLOURS.length - 1)), 1];
+  static COLOUR_RANGE = [...d3.range(0, 1, 1.0 / (ForceGradient.COLOURS.length - 1)), 1];
 
   static COLOR_SCALE = d3
     .scaleLinear()
-    .domain(ForceGradiant.COLOUR_RANGE)
-    .range(ForceGradiant.COLOURS)
+    .domain(ForceGradient.COLOUR_RANGE)
+    .range(ForceGradient.COLOURS)
     .interpolate(d3.interpolateHcl);
 
   constructor(props) {
@@ -156,15 +156,15 @@ export default class ForceGradiant extends Component {
         .append('defs')
         .append('linearGradient')
         .attr('id', `${this.uniqueForceGradient}`)
-        .attr('x1', '100%')
+        .attr('x1', '0%')
         .attr('y1', '0%')
-        .attr('x2', '0%')
+        .attr('x2', '100%')
         .attr('y2', '0%')
         .selectAll('stop')
-        .data(ForceGradiant.COLOURS)
+        .data(ForceGradient.COLOURS)
         .enter()
         .append('stop')
-        .attr('offset', (d, i) => i / (ForceGradiant.COLOR_SCALE.range().length - 1))
+        .attr('offset', (d, i) => i / (ForceGradient.COLOR_SCALE.range().length - 1))
         .attr('stop-color', (d) => d);
 
       svg
@@ -195,7 +195,7 @@ export default class ForceGradiant extends Component {
     svg.style('z-index', 999);
     const measuredText = d3.select(`#${this.uniqueColorScale} svg #measured-text`);
     const measuredLine = d3.select(`#${this.uniqueColorScale} svg #measured-line`);
-    const measuredForceX = ForceGradiant.getGradiantPositionX(
+    const measuredForceX = ForceGradient.getGradiantPositionX(
       actuator.measured,
       minForceLimit,
       maxForceLimit,
@@ -255,7 +255,7 @@ export default class ForceGradiant extends Component {
     }
 
     if (actuator.id !== undefined) {
-      const commandedForceX = ForceGradiant.getGradiantPositionX(
+      const commandedForceX = ForceGradient.getGradiantPositionX(
         actuator.commanded,
         minForceLimit,
         maxForceLimit,

diff --git a/...rs/ForceGradiant/ForceGradiant.module.css → ...rs/ForceGradient/ForceGradient.module.css b/...rs/ForceGradiant/ForceGradiant.module.css → ...rs/ForceGradient/ForceGradient.module.css
diff --git a/love/src/components/MainTel/M2/Actuators/Selector/Selector.jsx b/love/src/components/MainTel/M2/Actuators/Selector/Selector.jsx
@@ -22,7 +22,7 @@ import * as d3 from 'd3';
 import PropTypes from 'prop-types';
 import { uniqueId } from 'lodash';
 import { M2ActuatorPositions, M2ActuatorTangentPositions } from 'Config';
-import ForceGradiant from '../ForceGradiant/ForceGradiant';
+import ForceGradient from '../ForceGradient/ForceGradient';
 import Button from 'components/GeneralPurpose/Button/Button';
 import styles from './Selector.module.css';
 
@@ -149,7 +149,7 @@ export default class Selector extends Component {
       .scaleLinear()
       .domain(d3.extent([minForceLimit, maxForceLimit]))
       .range([0, 1]);
-    return ForceGradiant.COLOR_SCALE(1 - colorInterpolate(value));
+    return ForceGradient.COLOR_SCALE(colorInterpolate(value));
   };
 
   getActuator = (id) => {

diff --git a/love/src/components/MainTel/M2/M2.container.jsx b/love/src/components/MainTel/M2/M2.container.jsx
@@ -42,18 +42,6 @@ export const schema = {
       isPrivate: false,
       default: 'M2',
     },
-    minForceLimit: {
-      type: 'number',
-      description: 'Minimum force limit',
-      isPrivate: false,
-      default: 0,
-    },
-    maxForceLimit: {
-      type: 'number',
-      description: 'Maximum force limit',
-      isPrivate: false,
-      default: 1000,
-    },
     hasRawMode: {
       type: 'boolean',
       description: 'Whether the component has a raw mode version',