Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Discrete Event Visualization in Timeline #7967

Open
wants to merge 59 commits into
base: master
Choose a base branch
from

Conversation

scottbell
Copy link
Contributor

@scottbell scottbell commented Dec 18, 2024

Closes #7936

Describe your changes:

Adds a discrete event visualization for the Time Strip object.

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 a notable change that will require a special callout in the release notes? For example, will this break compatibility with existing APIs or projects that consume these plugins?

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.
  • 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?

scottbell and others added 30 commits December 9, 2024 10:32
- Removed in-page `style` defs from ExtendedLinesOverlay.vue; CSS actually located in timeline.scss.
- Improved sizing and style for Marcus Bains ("now") line.
- Removed extraneous padding at bottom of plot view when in Time Strip.
- Added missing header info to timeline.scss.
- CSS refinements.
- Removed bad `}` in TimeSystemAxis.vue.
- Removed `.u-contents` from line 129 of ganttChart.e2e.spec.js.
- Removed `event-handle` element; not needed.
- Changed `__event-wrapper` to not set height explicitly; uses absolute positioning.
- Added :before element to event-wrapper for better hit area.
- Improved hover styling.
- $colorEvent* style constants added to theme constant SCSS files.
- Layout converted to set `min-height` on top-most `c-swimlane` element.
Interior containers now use 100% height or absolute positioning.
- Removed `c-timeline-holder` from `c-events-tsv` in EventTimelineView.vue;
Refactored `c-events-tsv__contents` to be `js-events-tsv` as that was being used as a reference.
- New theme constant `eventLineW` sets event lines to be 1px wide for more precision.
- Removed event handle again.
Copy link

codecov bot commented Dec 18, 2024

Codecov Report

Attention: Patch coverage is 35.11111% with 292 lines in your changes missing coverage. Please review.

Project coverage is 56.92%. Comparing base (5be103e) to head (15b674f).

Files with missing lines Patch % Lines
...rc/plugins/events/components/EventTimelineView.vue 2.95% 197 Missing ⚠️
src/plugins/events/mixins/eventData.js 57.14% 33 Missing ⚠️
src/plugins/timeline/TimelineObjectView.vue 0.00% 25 Missing ⚠️
src/plugins/timeline/TimelineViewLayout.vue 50.00% 16 Missing ⚠️
src/ui/components/swim-lane/SwimLane.vue 45.45% 6 Missing ⚠️
src/plugins/timeline/ExtendedLinesOverlay.vue 0.00% 4 Missing ⚠️
src/plugins/imagery/components/ImageryTimeView.vue 78.57% 2 Missing and 1 partial ⚠️
src/plugins/plan/components/ActivityTimeline.vue 0.00% 1 Missing and 1 partial ⚠️
src/plugins/timeline/ExtendedLinesBus.js 50.00% 2 Missing ⚠️
src/ui/components/TimeSystemAxis.vue 81.81% 2 Missing ⚠️
... and 2 more
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7967      +/-   ##
==========================================
- Coverage   57.70%   56.92%   -0.79%     
==========================================
  Files         678      686       +8     
  Lines       27428    27825     +397     
  Branches     2691     2740      +49     
==========================================
+ Hits        15826    15838      +12     
- Misses      11264    11646     +382     
- Partials      338      341       +3     
Flag Coverage Δ
e2e-ci 62.97% <75.00%> (+0.15%) ⬆️
e2e-full 23.60% <19.59%> (-18.41%) ⬇️
unit 48.76% <14.66%> (-0.76%) ⬇️
Files with missing lines Coverage Δ
example/eventGenerator/EventMetadataProvider.js 100.00% <ø> (ø)
example/eventGenerator/EventTelemetryProvider.js 100.00% <100.00%> (ø)
example/eventGenerator/plugin.js 100.00% <100.00%> (ø)
src/api/tooltips/ToolTip.js 100.00% <ø> (ø)
src/api/tooltips/ToolTipAPI.js 100.00% <ø> (ø)
src/api/tooltips/components/TooltipComponent.vue 0.00% <ø> (ø)
src/plugins/events/EventInspectorViewProvider.js 100.00% <100.00%> (ø)
src/plugins/events/plugin.js 100.00% <100.00%> (ø)
...rc/plugins/imagery/ImageryTimestripViewProvider.js 100.00% <100.00%> (ø)
src/plugins/plugins.js 100.00% <100.00%> (ø)
... and 15 more

... and 17 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 5be103e...15b674f. Read the comment docs.

@scottbell scottbell added the pr:e2e:couchdb npm run test:e2e:couchdb label Dec 18, 2024
@github-actions github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Dec 18, 2024
scottbell and others added 5 commits December 18, 2024 20:39
- Remove `c-menu` from Tooltip.
- Tooltip component tweaks.
- Fixed previous change that broke grid layout of Stacked Plots in Time Strip.
- Re-enabled code that sets min-height for Stacked Plots in Time Strip based
on the number of children.
…ation' into 7936-add-discrete-event-visualization
- Fixed swimlane button markup.
- CSS cleanup.
@scottbell scottbell marked this pull request as ready for review December 19, 2024 08:22
- Swimlane style refinements.
- New theme constants for swimlane colors.
- Time Strip label column buttons aligned right.
- CSS cleanups.
- Significant improvements for Time Strip imagery view ahead of user-settable swimlane heights.
- Imagery container height, image height and width no longer set in code.
- Imagery swimlane now uses styles and hover behavior consistent with events.
- Add in alignmentData to set the left edge of the imagery-tsv element properly.
- Consolidate `__no-items` message style into timeline.scss.
- WIP prepping activities view for adjustable swimlane height.
- Refactored ActivityTimeline.vue to not draw SVG if no activities in timeframe.
- ActivityTimeline.vue `leftOffset` now uses absolute position `left` instead of `left-margin`.
- Sanding and shimming on imagery and events TS look and feel.
- Fixed scrollbar issue in imagery TS view when thumb goes beyond the right edge of the time frame.
- Fix left and right `alignmentData` offsets in
EventTimelineView.vue, ImageryTimeView.vue and ActivityTimeline.vue.
- Fix left and right `alignmentData` offsets that were not being applied to the correct element.
@@ -234,6 +235,7 @@
openmct.install(openmct.plugins.Timelist());
openmct.install(openmct.plugins.BarChart());
openmct.install(openmct.plugins.ScatterPlot());
openmct.install(openmct.plugins.EventTimestripPlugin(timeLinePlugin.extendedLinesBus));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to decide if we want this to be the default plugin in core. Traditionally, we don't add new plugins for e2e tests and run the addInitScript to add the plugin at runtime.

const eventWrappersContainer = page.locator('.c-events-tsv__container');
const eventWrappers = eventWrappersContainer.locator('.c-events-tsv__event-line');
const expectedEventWrappersCount = 25;
await expect(eventWrappers).toHaveCount(expectedEventWrappersCount);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is great

@@ -126,7 +126,7 @@ test.describe('Gantt Chart', () => {
await page.goto(ganttChart.url);

// Assert that the Plan's status is displayed as draft
expect(await page.locator('.u-contents.c-swimlane.is-status--draft').count()).toBe(
expect(await page.locator('.c-swimlane.is-status--draft').count()).toBe(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why was this change necessary?


// turn on extended lines
await page
.getByLabel(eventTimelineView.name)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this first step in the chainable shouldn't be necessary

Copy link
Collaborator

@unlikelyzero unlikelyzero left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks amazing. We should determine if we want this to be the default plugin and included as a notable change in the release notes

@unlikelyzero unlikelyzero added notable_change A change which should be noted in the changelog and removed type:enhancement labels Dec 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
notable_change A change which should be noted in the changelog type:feature Feature. Required intentional design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add discrete event visualization
3 participants