Add Expanded view for Time List #7378

shefalijoshi · 2024-01-17T08:15:38Z

Describe your changes:

Adds a new component that displays the timelist view in compact mode provided an option isCompact: true
Adds inspector configuration to set compact view enabled/disabled

TODO:

@charlesh88 and @shefalijoshi Need to figure out some details of the item color dot, countdown label, start/end times and progress pie.
@shefalijoshi Currently hardcoded time Relation and itemState css - this needs to be updated from the plan after merging Activity state display for plans in Gantt and Time list views #7370
@charlesh88 CSS final mile.
@charlesh88 and @shefalijoshi Wire up time hero context strings (STARTS, ENDS, etc.).
@charlesh88 and @shefalijoshi Finish wiring up time vs. status evaluations, like Incomplete and Overdue. This is needed to control the proper display of icons and the progress pie element.
@shefalijoshi Clicking an Activity should select the "Activity" tab in the Inspector.
Activities should show "STARTS/ENDS/ENDED" depending on their time - inferred states (OVERDUE/RUNNING LONG) should only show if the Activity is not started or in progress, respectively. 1/30/24: "OVERDUE" is not displaying for current Activities that are not started.

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?
Tests included and/or updated with changes?
Has this been smoke tested?
Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
Have you associated a milestone with this PR? Note: leave blank if unsure.
Is this a breaking change to be called out in the release notes?
Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

Changes appear to address issue?
Reviewer has tested changes by following the provided instructions?
Changes appear not to be breaking changes?
Appropriate automated tests included?
Code style and in-line documentation are appropriate?

…ties are selected

…imelist

codecov · 2024-01-17T08:21:15Z

Codecov Report

Attention: 104 lines in your changes are missing coverage. Please review.

Comparison is base (d42aa54) 55.74% compared to head (5cfa222) 55.45%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7378      +/-   ##
==========================================
- Coverage   55.74%   55.45%   -0.30%     
==========================================
  Files         668      668              
  Lines       26723    26800      +77     
  Branches     2585     2606      +21     
==========================================
- Hits        14897    14862      -35     
- Misses      11115    11222     +107     
- Partials      711      716       +5

Flag	Coverage Δ
e2e-full	`41.27% <ø> (-7.74%)`	⬇️
e2e-stable	`59.09% <100.00%> (-0.21%)`	⬇️
unit	`48.58% <32.02%> (-0.12%)`	⬇️

Files	Coverage Δ
...s/plan/inspector/components/PlanActivitiesView.vue	`1.23% <ø> (ø)`
src/plugins/timelist/constants.js	`100.00% <100.00%> (ø)`
...imelist/inspector/TimeListInspectorViewProvider.js	`100.00% <ø> (+33.33%)`	⬆️
src/plugins/utcTimeSystem/UTCTimeFormat.js	`86.66% <ø> (ø)`
...an/inspector/components/PlanActivityStatusView.vue	`7.69% <0.00%> (ø)`
.../plugins/timelist/inspector/FilteringComponent.vue	`0.00% <0.00%> (ø)`
src/plugins/timelist/inspector/EventProperties.vue	`5.88% <0.00%> (ø)`
...gins/timelist/inspector/TimelistPropertiesView.vue	`7.69% <0.00%> (-1.40%)`	⬇️
src/plugins/timelist/TimelistComponent.vue	`56.81% <54.43%> (-2.38%)`	⬇️
src/plugins/timelist/ExpandedViewItem.vue	`5.00% <5.00%> (ø)`

... and 11 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

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

charlesh88 · 2024-01-18T22:06:27Z

There was a bit of confusion on naming: 'Compact' should refer to the current Time List view:

'Expanded' is the name for the new style:

ozyx

Reviewed and have some comments regarding the structure of the Vue components and some anti-patterns that we ought not to proliferate due to major performance issues-- we can nip this in the bud straight away with a bit of restructuring.

This also needs tests

src/plugins/timelist/CompactView.vue

src/plugins/timelist/inspector/TimelistPropertiesView.vue

src/plugins/timelist/CompactViewItem.vue

- Markup and CSS sanding and polishing. - Still WIP!

…le dropdown configuration in the inspector.

src/plugins/timelist/inspector/TimelistPropertiesView.vue

- Label formatting Todo notes about states. - Computed values and `v-ifs` added to control display for progress pie and countdown 'hero'. - Still WIP!

…list-compact-view

- Add svg icons and some stubbed in logic. - Still WIP!

…o the plan plugin.

ozyx

Alright this is looking good! I've left a bunch of suggestions, mostly small stuff-- but we really, really ought to break those item objects up into individual properties or we're losing out on a lot of free perf benefits.

src/plugins/timelist/ExpandedViewItem.vue

ozyx · 2024-01-30T00:57:56Z

src/plugins/timelist/ExpandedViewItem.vue

+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+      }
+    },


TimeContext stuff is gonna be a great candidate for a Open MCT specific Composable :D

src/plugins/timelist/TimelistComponent.vue

src/plugins/timelist/inspector/svg-progress.js

src/plugins/plan/inspector/components/PlanActivitiesView.vue

src/plugins/timelist/TimelistComponent.vue

src/plugins/timelist/ExpandedViewItem.vue

…nce benefits

# Conflicts fixed: # src/styles/_constants-snow.scss

… into timelist-compact-view

ozyx

Good stuff. Awesome job fixing the re-renders-- initial testing shows the list is much more performant 👏

This all LGTM. I have a few non-blocking comments/questions. nothing urgent:)

ozyx · 2024-01-30T22:11:27Z

src/plugins/timelist/ExpandedViewItem.vue

+    name: {
+      type: String,
+      default: ''
+    },
+    start: {
+      type: Number,
+      default: 0
+    },
+    end: {
+      type: Number,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      default: 0
+    },
+    countdown: {
+      type: Number,
+      default: 0
+    },
+    cssClass: {
+      type: String,
+      default: ''


This is great! Do you think name, start, end, duration, and countdown, should be required props?

ozyx · 2024-01-30T22:11:43Z

src/plugins/timelist/ExpandedViewItem.vue

-      default() {
-        return 'notStarted';
-      }
+      default: 'notStarted'


ozyx · 2024-01-30T22:27:36Z

src/plugins/timelist/ExpandedViewItem.vue

        let formattedValue;
        if (itemProperty.format) {
          const itemStartDate = new Date(value).toDateString();
          const timestampDate = new Date(this.timestamp).toDateString();
-          formattedValue = itemProperty.format(value, this.item, itemProperty.key, this.openmct, {
+          formattedValue = itemProperty.format(value, undefined, itemProperty.key, this.openmct, {


oh weird. where's this defined?

charlesh88

Much better! Previous issues I commented on look to have been fixed.

"Cancelled” should be removed, and "Skipped" should be brought back.
The time context hero text (STARTS/ENDS/etc.) isn't reactive, but needs to be.

charlesh88

We still need to fix the Activity tab issue, but that is being tracked with #7442.

src/plugins/timelist/inspector/svg-progress.js

… into timelist-compact-view

shefalijoshi added 7 commits January 9, 2024 23:15

Add activity states domain object and interceptor to auto create one

7003f00

Add activity state inspector option

92a30a3

Only save status if we have a unique ids for activities

4d4f83e

Include the id in the activity properties

02edb99

Don't show activity state section in the inspector if multiple activi…

e47bfed

…ties are selected

Display activity properties when an activity row is selected in the t…

3c14025

…imelist

Add compact view for timelist

2e41753

shefalijoshi requested a review from charlesh88 January 17, 2024 08:15

ozyx self-requested a review January 18, 2024 00:12

shefalijoshi added 2 commits January 17, 2024 21:34

Add inspector configuration for compact view

c6a6a18

Set colors based on time relation of activity

a0ccc4e

charlesh88 changed the title ~~Add compact view for timelist~~ Add Expanded view for Time List Jan 18, 2024

shefalijoshi added 2 commits January 18, 2024 15:32

Use activity id as key if it is available

65a7e7e

Ensure the correct option is selected for activity states

176d344

ozyx suggested changes Jan 19, 2024

View reviewed changes

Closes #7377

9ff31d5

- Markup and CSS sanding and polishing. - Still WIP!

ozyx mentioned this pull request Jan 19, 2024

Activity state display for plans in Gantt and Time list views #7370

Merged

15 tasks

charlesh88 and others added 4 commits January 18, 2024 17:48

Closes #7377

ad07174

- Markup and CSS sanding and polishing. - Still WIP!

Add status label

02c796a

Rename to Expanded view and isExpanded as properties. Add display sty…

44f4ac2

…le dropdown configuration in the inspector.

Refactor activity selection. Display activity properties

b0a21d4

ozyx suggested changes Jan 19, 2024

View reviewed changes

src/plugins/timelist/inspector/TimelistPropertiesView.vue Outdated Show resolved Hide resolved

src/plugins/timelist/inspector/TimelistPropertiesView.vue Outdated Show resolved Hide resolved

src/plugins/timelist/inspector/TimelistPropertiesView.vue Outdated Show resolved Hide resolved

charlesh88 and others added 6 commits January 19, 2024 13:37

Closes #7377

3655ba9

- Label formatting Todo notes about states. - Computed values and `v-ifs` added to control display for progress pie and countdown 'hero'. - Still WIP!

Merge remote-tracking branch 'origin/timelist-compact-view' into time…

3365039

…list-compact-view

Closes #7377

5cbd0fd

- Add svg icons and some stubbed in logic. - Still WIP!

Remove activity states plugin. Move the activity states interceptor t…

dc1def5

…o the plan plugin.

Change activity states interceptor parameters to options

b413a9b

Rename constants

bbf5454

shefalijoshi requested a review from charlesh88 January 30, 2024 00:10

ozyx suggested changes Jan 30, 2024

View reviewed changes

shefalijoshi added 2 commits January 29, 2024 21:54

Address review comments

333b683

Remove reactive selection for plan activities

1bf5a15

shefalijoshi requested a review from ozyx January 30, 2024 17:22

ozyx suggested changes Jan 30, 2024

View reviewed changes

shefalijoshi and others added 4 commits January 30, 2024 13:59

destructure props into individual item properties for render performa…

004957d

…nce benefits

Merge remote-tracking branch 'origin' into timelist-compact-view

ac80da4

# Conflicts fixed: # src/styles/_constants-snow.scss

Merge branch 'timelist-compact-view' of https://github.com/nasa/openmct…

6026876

… into timelist-compact-view

Use local variables and remove JSON utility methods

73c2e7e

shefalijoshi requested a review from ozyx January 30, 2024 22:10

ozyx approved these changes Jan 30, 2024

View reviewed changes

charlesh88 requested changes Jan 30, 2024

View reviewed changes

Change cancelled to skipped

c03d7bb

shefalijoshi requested a review from charlesh88 January 30, 2024 22:39

shefalijoshi added 2 commits January 30, 2024 14:51

Focus the activity tab when shown

c45c6a2

Fix label updates

f068090

charlesh88 approved these changes Jan 30, 2024

View reviewed changes

Merge branch 'master' into timelist-compact-view

14ede06

akhenry requested changes Jan 30, 2024

View reviewed changes

src/plugins/timelist/inspector/svg-progress.js Outdated Show resolved Hide resolved

akhenry requested changes Jan 30, 2024

View reviewed changes

src/plugins/timelist/inspector/svg-progress.js Outdated Show resolved Hide resolved

shefalijoshi added 3 commits January 30, 2024 15:51

Add countup to cspell

fbd271a

Remove progress pie due to licensing unknowns

fb38cdb

Merge branch 'timelist-compact-view' of https://github.com/nasa/openmct…

5cfa222

… into timelist-compact-view

shefalijoshi requested a review from akhenry January 31, 2024 00:06

akhenry approved these changes Jan 31, 2024

View reviewed changes

akhenry added the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 31, 2024

github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Jan 31, 2024

ozyx merged commit 18e4b9d into master Jan 31, 2024
36 checks passed

ozyx deleted the timelist-compact-view branch January 31, 2024 00:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Expanded view for Time List #7378

Add Expanded view for Time List #7378

shefalijoshi commented Jan 17, 2024 •

edited by akhenry

Loading

codecov bot commented Jan 17, 2024 •

edited

Loading

charlesh88 commented Jan 18, 2024

ozyx left a comment •

edited

Loading

ozyx left a comment

ozyx Jan 30, 2024

ozyx left a comment

ozyx Jan 30, 2024

ozyx Jan 30, 2024

ozyx Jan 30, 2024

charlesh88 left a comment •

edited

Loading

charlesh88 left a comment

Add Expanded view for Time List #7378

Add Expanded view for Time List #7378

Conversation

shefalijoshi commented Jan 17, 2024 • edited by akhenry Loading

Describe your changes:

All Submissions:

Author Checklist

Reviewer Checklist

codecov bot commented Jan 17, 2024 • edited Loading

Codecov Report

charlesh88 commented Jan 18, 2024

ozyx left a comment • edited Loading

Choose a reason for hiding this comment

ozyx left a comment

Choose a reason for hiding this comment

ozyx Jan 30, 2024

Choose a reason for hiding this comment

ozyx left a comment

Choose a reason for hiding this comment

ozyx Jan 30, 2024

Choose a reason for hiding this comment

ozyx Jan 30, 2024

Choose a reason for hiding this comment

ozyx Jan 30, 2024

Choose a reason for hiding this comment

charlesh88 left a comment • edited Loading

Choose a reason for hiding this comment

charlesh88 left a comment

Choose a reason for hiding this comment

shefalijoshi commented Jan 17, 2024 •

edited by akhenry

Loading

codecov bot commented Jan 17, 2024 •

edited

Loading

ozyx left a comment •

edited

Loading

charlesh88 left a comment •

edited

Loading