Time strip view to show different components within a given timeline (#3654)

* Initial commit of plot refactor for vuejs

* Use es6 classes instead of using extend

* Use classList api to add and remove classes

* Remove angular specific event mechanisms

* Refactor plot legend into smaller components

* Refactor moving config into MctPlot component. Fix Legend issues.

* Refactor XAxis and YAxis into their own components

* Remove commented out code

* Remove empty initialize method

* Fix grid lines and initialize function revert.

* Check that plots views are available only to domainObjects that have range and domain

* Make css class a computed property

* Remove unnecessary legacyObject conversion

* Remove comments and commented out code

* Remove use of private for vue methods

* Remove console logs

* Fixes Y-axis ticks display

* Add plots and plans to the time strip view

* Adds stacked plots and overlay plots

* Fix css for stacked plots

* Disable Vue plots

* Rename Stacked plot item component

* Make the time axis a component
Ensure plans and timelines use the time axis component and it is displayed correctly
ensure plots don't display specific controls when in compact mode

* Add missing file

* Revert change to state generator metadata

* Address Review comment: Remove unnecessary event emitted

* Address review comments: Add a note about why nextTick is needed

* Display time systems in time strip view
Update look and feel (css)

* Fix bug with legend when multiple plots are being displayed

* Don't show action buttons for stacked plots

* Changes to plan view to render as a css grid

* Change LinearScale to a class

* Remove duplicated comment

* Adds missing copyright info

* Revert change to stackedplotItem

* Styling for Timestrip view WIP

- Significant mods to markup and CSS to use CSS grid;
- CSS class names changed;

* Styling for Timestrip view WIP

- Temp mods to illustrate design desires for the appearance of the time
axis;

* Layout changes for plan in timestrip view

* Increase style height to match number of stacked plot items

* Fix ticks

* Fix removal of activities

* Remove event listeners on destroy

* Styling for Timestrip view WIP

- VERY WIP trying to make the plan component work properly when dropped
into a Timestrip view, lots of badness that needs to be fixed;
- Refined classes in acivity bars to differentiate between the rect and
its text;

* Show Vue plots only in timestrip view.
Reorder and Remove now works for timestrip objects

* Make swim lanes a component to be reused by time strip and plan views
Rewrite svg rendering to use javascript rather than d3.
Write a prototype of foreign object for svg to render text

* Don't show left and right edges when start or end is out of bounds

* Descriptive name for Plan views

* Adds plan icon and name

* Fixes linting issues

* Adds basic tests

* Fixes broken test.

* Adds new test

* Fix linting errors. Adds tests

* Adds tests

* Adds tests for stacked plots

* Adds more tests

* Removes fdescribe

* Adds tests for y-axis ticks

* Tests for addition of series to plots

* Adds more tests

* Adds cursor guides test

* Adds tests for interceptors

* Adds more plots tests for x and y scale

* Use config store

* Adding goToOriginalAction tests

* Fix tests for plan and time strip views

* Fixes height of SVG

* Fixes broken tests

* Address review comments: remove view options API change.

* Remove commented out code

* Fix tests

* Use the clientWidth of the plan if it's available

* Account for the width of labels in the client width

* Remove unnecessary test code

Co-authored-by: charlesh88 <charlesh88@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/plugins/plugins.js

@@ -60,11 +60,12 @@ define([
     './nonEditableFolder/plugin',
     './persistence/couch/plugin',
     './defaultRootName/plugin',
-    './timeline/plugin',
+    './plan/plugin',
     './viewDatumAction/plugin',
     './interceptors/plugin',
     './performanceIndicator/plugin',
-    './CouchDBSearchFolder/plugin'
+    './CouchDBSearchFolder/plugin',
+    './timeline/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -105,11 +106,12 @@ define([
     NonEditableFolder,
     CouchDBPlugin,
     DefaultRootName,
-    Timeline,
+    PlanLayout,
     ViewDatumAction,
     ObjectInterceptors,
     PerformanceIndicator,
-    CouchDBSearchFolder
+    CouchDBSearchFolder,
+    Timeline
 ) {
     const bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -204,11 +206,12 @@ define([
     plugins.NonEditableFolder = NonEditableFolder.default;
     plugins.ISOTimeFormat = ISOTimeFormat.default;
     plugins.DefaultRootName = DefaultRootName.default;
-    plugins.Timeline = Timeline.default;
+    plugins.PlanLayout = PlanLayout.default;
     plugins.ViewDatumAction = ViewDatumAction.default;
     plugins.ObjectInterceptors = ObjectInterceptors.default;
     plugins.PerformanceIndicator = PerformanceIndicator.default;
     plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
+    plugins.Timeline = Timeline.default;
 
     return plugins;
 });