Add gauge 4896 #4919

nikhilmandlik · 2022-03-05T06:52:46Z

Closes #4896

Describe your changes:

All Submissions:

Have you followed the guidelines in our Contributing document?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?
Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

Changes address original issue?
Unit tests included and/or updated with changes?
Command line build passes?
Has this been smoke tested?
Testing instructions included in associated issue?

Reviewer Checklist

Changes appear to address issue?
Changes appear not to be breaking changes?
Appropriate unit tests included?
Code style and in-line documentation are appropriate?
Commit messages meet standards?
Has associated issue been labelled unverified? (only applicable if this PR closes the issue)
Has associated issue been labelled bug? (only applicable if this PR is for a bug fix)

- Copied WIP from maelstrom2-core branch; - Initial integration with current Open MCT codebase;

codecov · 2022-03-05T18:30:09Z

Codecov Report

Merging #4919 (4c6f4a7) into master (402cd15) will decrease coverage by 0.01%.
The diff coverage is 45.91%.

@@            Coverage Diff             @@
##           master    #4919      +/-   ##
==========================================
- Coverage   49.95%   49.93%   -0.02%     
==========================================
  Files         526      533       +7     
  Lines       19287    19480     +193     
  Branches     1734     1756      +22     
==========================================
+ Hits         9634     9728      +94     
- Misses       9221     9311      +90     
- Partials      432      441       +9

Impacted Files	Coverage Δ
src/api/forms/FormController.js	`81.81% <ø> (ø)`
...rc/api/forms/components/controls/CheckBoxField.vue	`0.00% <0.00%> (ø)`
src/api/forms/components/controls/NumberField.vue	`0.00% <ø> (ø)`
...pi/forms/components/controls/ToggleSwitchField.vue	`0.00% <0.00%> (ø)`
src/api/forms/toggle-check-box-mixin.js	`0.00% <0.00%> (ø)`
src/plugins/formActions/CreateWizard.js	`62.16% <0.00%> (-3.56%)`	⬇️
...c/plugins/gauge/components/GaugeFormController.vue	`0.00% <0.00%> (ø)`
src/ui/inspector/details/Properties.vue	`61.40% <0.00%> (-1.10%)`	⬇️
src/plugins/gauge/GaugePlugin.js	`21.21% <21.21%> (ø)`
src/api/forms/components/FormRow.vue	`40.00% <33.33%> (-1.18%)`	⬇️
... and 7 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 402cd15...4c6f4a7. Read the comment docs.

- Added needle display style; - Tweaked form wording;

charlesh88 · 2022-03-08T07:20:05Z

@nikhilmandlik Just pushed a needle display style:

- WIP! - Added vertical and horizontal meter gauge types;

- WIP! - Major additions of vertical and horizontal meter gauge types; - Min and max range values now display based on properties settings; - Better color definitions, moving towards theme-based color vars; - Animation transition now applied to gauge value elements transforms;

- Better approach to clipping high and low values/ranges in meter;

…ge-4896

- Tweaks to properties form text; - Enhanced GAUGE_TYPES const for better human-readable names;

- WIP: turn off transition for dial to avoid delay "flash" problem;

- Remove rotation angle clipping from needle dial gauge; - Reinstate transition for needle dial only; - Fix typo in props form;

- WIP! - Significant work: added lower limit to dial and meter; - Added limitLow, refactored limit to limitHigh; - Improved valToPercentMeter method;

- Handle case when high or low limit isn't defined;

- Current value implemented as size-relative SVG text in dial and meter; - Code cleanups; - TODO: cleanup and migrate colors to themes;

- Merging Nikhil's latest, resolve conflicts; - TODO: clip dial display when values are outside set min/max;

- Added check to suppress display of dial needle; - Moved filled dial display check in code; - Code cleanup;

- Color refinement; - Code cleanup;

- Properties form CSS cleanups and text tweaks;

…ime conductors start end values.

- Added gauge type `meter-vertical-inverted`; - CSS tightened up;

akhenry · 2022-04-22T16:55:00Z

src/plugins/gauge/components/Gauge.vue

+            this.rangeLow = this.round(this.limitLow - Math.abs(this.limitLow * LIMIT_PADDING_IN_PERCENT / 100));
+        },
+        updateValue(datum) {
+            if (this.isRendering) {


This will short-circuit out and result in a stale value being rendered. Read the previous comment on this. We always want to store the new value (on a non-reactive property), then shortcut out if there is a RAF already queued. If we shortcut out without storing the value then when the queued RAF eventually executes it will be with a stale value.

ahh good catch, thanks 👍

davetsay · 2022-04-22T19:59:16Z

src/plugins/gauge/GaugePlugin.js

@@ -0,0 +1,199 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government


copy should be 2022

davetsay · 2022-04-22T20:00:27Z

src/api/forms/toggle-check-box-mixin.js

@@ -0,0 +1,19 @@
+export default {


would name this toggle-mixin or form-toggle-mixin as it is used by at least check box and switch.

Let's file a followup for this and assign to @nikhilmandlik

davetsay · 2022-04-22T20:02:01Z

src/plugins/gauge/GaugePlugin.js

+import GaugeFormController from './components/GaugeFormController.vue';
+import Vue from 'vue';
+
+export const GAUGE_TYPES = [


is there a reason we need tuples instead of standard key/val objects?

Let's file a followup for this and assign to @nikhilmandlik

davetsay · 2022-04-22T20:06:18Z

src/plugins/gauge/GaugePluginSpec.js

+    composition: []
+};
+
+describe('Gaugue plugin', () => {


spelling error

Akshually that's the British spelling

davetsay · 2022-04-22T20:07:25Z

src/plugins/gauge/GaugePluginSpec.js

+        openmct = createOpenMct();
+        openmct.on('start', done);
+
+        openmct.startHeadless(appHolder);


startHeadless will ignore appHolder

davetsay · 2022-04-22T20:19:12Z

src/plugins/gauge/GaugeViewProvider.js

@@ -0,0 +1,65 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government


copy should be 2022

davetsay · 2022-04-22T20:26:46Z

src/plugins/gauge/components/GaugeFormController.vue

+        :class="model.cssClass"
+    >
+        <ToggleSwitch
+            id="isUseTelemetryLimits"


do you need to use an id over a vue ref? is this for css selector?

davetsay · 2022-04-22T20:30:10Z

src/plugins/gauge/components/GaugeFormController.vue

+        <ToggleSwitch
+            id="isUseTelemetryLimits"
+            :checked="isUseTelemetryLimits"
+            :label="`Use telemetry limits for minimum and maximum ranges`"


no need to bind to a static string

davetsay · 2022-04-22T20:33:12Z

src/plugins/imagery/components/Compass/compass.scss

@@ -14,7 +14,7 @@ $elemBg: rgba(black, 0.7);
    position: absolute;
    left: 0;
    top: 0;
-    z-index: 1;
+    z-index: 2;


stealthy non-issue change?

@charlesh88 ?

davetsay · 2022-04-22T20:33:26Z

src/plugins/imagery/components/imagery-view.scss

@@ -222,7 +222,7 @@
    .h-local-controls--overlay-content {
        position: absolute;
        left: $interiorMargin; top: $interiorMargin;
-        z-index: 2;
+        z-index: 70;


stealthy non-issue change?

@charlesh88 ?

Dismissing for merge

unlikelyzero

still need to remove guage.e2eSpec.js unless we

This reverts commit a53a3a0.

charlesh88 and others added 4 commits March 4, 2022 14:18

Add new Gauge component

b6998b3

- Copied WIP from maelstrom2-core branch; - Initial integration with current Open MCT codebase;

convert to ES6, added checkbox and GaugeFormController control types

e0326cf

adjust radial font

2e2bf9f

rename filenames

791ff2e

Add new Gauge component

db288d8

- Added needle display style; - Tweaked form wording;

charlesh88 and others added 23 commits March 8, 2022 17:20

Add new Gauge component

ce7df4c

- WIP! - Added vertical and horizontal meter gauge types;

added gaugeType option

92550af

Add new Gauge component

fd40065

- Better approach to clipping high and low values/ranges in meter;

Merge branch 'add-gauge-4896' of github.com:nasa/openmct into add-gau…

b3fabfe

…ge-4896

Add new Gauge component

ec531cb

- Tweaks to properties form text; - Enhanced GAUGE_TYPES const for better human-readable names;

Add new Gauge component

84f527c

- WIP: turn off transition for dial to avoid delay "flash" problem;

Add new Gauge component

36eaee4

- Remove rotation angle clipping from needle dial gauge; - Reinstate transition for needle dial only; - Fix typo in props form;

Add new Gauge component

6804ed5

- WIP! - Significant work: added lower limit to dial and meter; - Added limitLow, refactored limit to limitHigh; - Improved valToPercentMeter method;

Add new Gauge component

80620d7

- Handle case when high or low limit isn't defined;

add digits counter for main value size adjustment.

beb0ac8

add toggleSwitch form control

845f9e8

renamed GaugePlugin and restructure GaugePlugin form.

c5bc993

implemented use telemetry limits.

0633582

Add new Gauge component

fb9c043

- Current value implemented as size-relative SVG text in dial and meter; - Code cleanups; - TODO: cleanup and migrate colors to themes;

Add new Gauge component

ad47d0f

- Merging Nikhil's latest, resolve conflicts; - TODO: clip dial display when values are outside set min/max;

clean up

8260d8c

Add new Gauge component

445350e

- Added check to suppress display of dial needle; - Moved filled dial display check in code; - Code cleanup;

Add new Gauge component

c1a4bda

- Color refinement; - Code cleanup;

Add new Gauge component

2b7d626

- Properties form CSS cleanups and text tweaks;

current value should stop updating current time is out of bounds of t…

7ab4a80

…ime conductors start end values.

added default values

5989cd6

Add new Gauge component

8f762d0

- Added gauge type `meter-vertical-inverted`; - CSS tightened up;

nikhilmandlik added 5 commits April 18, 2022 14:00

Merge branch 'master' into add-gauge-4896

1d0bff9

Merge branch 'master' into add-gauge-4896

1bf80f1

added more tests

b3c0f5b

Merge branch 'master' into add-gauge-4896

63433a1

Merge branch 'master' into add-gauge-4896

a4f6997

nikhilmandlik requested review from charlesh88, shefalijoshi, akhenry, jvigliotta and unlikelyzero April 19, 2022 20:07

Merge branch 'master' into add-gauge-4896

af2ee60

akhenry requested changes Apr 22, 2022

View reviewed changes

Always cache the latest value

598524f

davetsay reviewed Apr 22, 2022

View reviewed changes

Fix copyright notices

b72b5dc

akhenry force-pushed the add-gauge-4896 branch from 072fccd to b72b5dc Compare April 22, 2022 21:13

akhenry added 2 commits April 22, 2022 14:18

Remove unused ID

7685b2c

Fix test

4c6f4a7

akhenry force-pushed the add-gauge-4896 branch from 92c926e to 4c6f4a7 Compare April 22, 2022 21:23

akhenry approved these changes Apr 22, 2022

View reviewed changes

akhenry merged commit a53a3a0 into master Apr 22, 2022

unlikelyzero suggested changes Apr 22, 2022

View reviewed changes

unlikelyzero added a commit that referenced this pull request Apr 22, 2022

Revert "Add gauge 4896 (#4919)"

a1f70c8

This reverts commit a53a3a0.

unlikelyzero mentioned this pull request Apr 22, 2022

Revert "Add gauge 4896" #5103

Closed

akhenry mentioned this pull request Apr 28, 2022

Dynamic dial-type Gauge sizing by height and width #5129

Merged

15 tasks

unlikelyzero deleted the add-gauge-4896 branch July 5, 2022 15:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add gauge 4896 #4919

Add gauge 4896 #4919

nikhilmandlik commented Mar 5, 2022 •

edited

Loading

codecov bot commented Mar 5, 2022 •

edited

Loading

charlesh88 commented Mar 8, 2022

akhenry Apr 22, 2022

nikhilmandlik Apr 22, 2022

davetsay Apr 22, 2022

davetsay Apr 22, 2022

akhenry Apr 22, 2022

davetsay Apr 22, 2022

akhenry Apr 22, 2022

davetsay Apr 22, 2022

akhenry Apr 22, 2022

davetsay Apr 22, 2022

davetsay Apr 22, 2022

davetsay Apr 22, 2022

davetsay Apr 22, 2022

davetsay Apr 22, 2022

akhenry Apr 22, 2022

davetsay Apr 22, 2022

akhenry Apr 22, 2022

unlikelyzero left a comment

		@@ -0,0 +1,199 @@
		/*****************************************************************************
		* Open MCT, Copyright (c) 2014-2018, United States Government

		@@ -0,0 +1,65 @@
		/*****************************************************************************
		* Open MCT, Copyright (c) 2014-2018, United States Government

Add gauge 4896 #4919

Add gauge 4896 #4919

Conversation

nikhilmandlik commented Mar 5, 2022 • edited Loading

Describe your changes:

All Submissions:

Author Checklist

Reviewer Checklist

codecov bot commented Mar 5, 2022 • edited Loading

Codecov Report

charlesh88 commented Mar 8, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

unlikelyzero left a comment

Choose a reason for hiding this comment

nikhilmandlik commented Mar 5, 2022 •

edited

Loading

codecov bot commented Mar 5, 2022 •

edited

Loading