From baa8078d23b7c304156280e7657b2e0254678cc4 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Fri, 2 Oct 2020 11:13:04 -0700
Subject: [PATCH] Plan view to display activities (#3413)

* (WIP) Adds Plan view and visualization of activities on different rows

* Updates to show activities in the right rows

* Improve algorithm to get activityRow for next activity

* When activities have names that are longer than their width, show the name outside the activity rectangle

* Remove Activity component as we don't need it right now

* Use canvas to draw activities instead of svg for performance

* Retain SVG version if needed

* Include text when calculating overlap

* Fix padding, text positioning

* Add colors for activities

* Fixed bug - Rectangle was shrinking as time passed
Draw using SVG

* Adds performance activities

* [WIP] Refactoring code to be more readable

* Fix issues with activity layout

* Adds draft for groups

* Adds x-offset for groups

* Draw a "now" marker for the canvas

* Fix formatting for the timeline

* Adds now line for the timeline

* Add ability to upload a plan json file.

* Add tests for the Plan view

* Fix issue with File Type checking
add resizing for timeline view plans

* Refactor code to be more readable

* Fix tests that are failing on circleCI

* Fix icon for timeline view
---
 index.html                                   |   1 +
 platform/forms/src/FileInputService.js       |   7 +-
 platform/forms/src/MCTFileInput.js           |   2 +-
 src/plugins/plugins.js                       |   7 +-
 src/plugins/timeline/Plan.vue                | 437 +++++++++++++++++++
 src/plugins/timeline/TimelineViewLayout.vue  |  45 ++
 src/plugins/timeline/TimelineViewProvider.js |  64 +++
 src/plugins/timeline/activities.json         |  38 ++
 src/plugins/timeline/plugin.js               |  49 +++
 src/plugins/timeline/pluginSpec.js           | 205 +++++++++
 src/plugins/timeline/timeline-axis.scss      |  57 +++
 src/styles/vue-styles.scss                   |   1 +
 12 files changed, 908 insertions(+), 5 deletions(-)
 create mode 100644 src/plugins/timeline/Plan.vue
 create mode 100644 src/plugins/timeline/TimelineViewLayout.vue
 create mode 100644 src/plugins/timeline/TimelineViewProvider.js
 create mode 100644 src/plugins/timeline/activities.json
 create mode 100644 src/plugins/timeline/plugin.js
 create mode 100644 src/plugins/timeline/pluginSpec.js
 create mode 100644 src/plugins/timeline/timeline-axis.scss

diff --git a/index.html b/index.html
index 3911020002..4bb9f9f33d 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,7 @@
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.Generator());
         openmct.install(openmct.plugins.ExampleImagery());
+        openmct.install(openmct.plugins.Timeline());
         openmct.install(openmct.plugins.UTCTimeSystem());
         openmct.install(openmct.plugins.AutoflowView({
             type: "telemetry.panel"
diff --git a/platform/forms/src/FileInputService.js b/platform/forms/src/FileInputService.js
index fae0f4ef37..ea26c9a2ec 100644
--- a/platform/forms/src/FileInputService.js
+++ b/platform/forms/src/FileInputService.js
@@ -29,7 +29,6 @@ define(["zepto"], function ($) {
      * @memberof platform/forms
      */
     function FileInputService() {
-
     }
 
     /**
@@ -38,7 +37,7 @@ define(["zepto"], function ($) {
      *
      * @returns {Promise} promise for an object containing file meta-data
      */
-    FileInputService.prototype.getInput = function () {
+    FileInputService.prototype.getInput = function (fileType) {
         var input = this.newInput();
         var read = this.readFile;
         var fileInfo = {};
@@ -51,6 +50,10 @@ define(["zepto"], function ($) {
                 file = this.files[0];
                 input.remove();
                 if (file) {
+                    if (fileType && (!file.type || (file.type !== fileType))) {
+                        reject("Incompatible file type");
+                    }
+
                     read(file)
                         .then(function (contents) {
                             fileInfo.name = file.name;
diff --git a/platform/forms/src/MCTFileInput.js b/platform/forms/src/MCTFileInput.js
index 1726753b68..f908592def 100644
--- a/platform/forms/src/MCTFileInput.js
+++ b/platform/forms/src/MCTFileInput.js
@@ -40,7 +40,7 @@ define(
                 }
 
                 function handleClick() {
-                    fileInputService.getInput().then(function (result) {
+                    fileInputService.getInput(scope.structure.type).then(function (result) {
                         setText(result.name);
                         scope.ngModel[scope.field] = result;
                         control.$setValidity("file-input", true);
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index 6c3f7b2401..d49e0eb801 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -57,7 +57,8 @@ define([
     './notificationIndicator/plugin',
     './newFolderAction/plugin',
     './persistence/couch/plugin',
-    './defaultRootName/plugin'
+    './defaultRootName/plugin',
+    './timeline/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -95,7 +96,8 @@ define([
     NotificationIndicator,
     NewFolderAction,
     CouchDBPlugin,
-    DefaultRootName
+    DefaultRootName,
+    Timeline
 ) {
     const bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -188,6 +190,7 @@ define([
     plugins.NewFolderAction = NewFolderAction.default;
     plugins.ISOTimeFormat = ISOTimeFormat.default;
     plugins.DefaultRootName = DefaultRootName.default;
+    plugins.Timeline = Timeline.default;
 
     return plugins;
 });
diff --git a/src/plugins/timeline/Plan.vue b/src/plugins/timeline/Plan.vue
new file mode 100644
index 0000000000..54036ec4e9
--- /dev/null
+++ b/src/plugins/timeline/Plan.vue
@@ -0,0 +1,437 @@
+<template>
+<div ref="axisHolder"
+     class="c-timeline-plan"
+>
+    <div class="nowMarker"><span class="icon-arrow-down"></span></div>
+</div>
+</template>
+
+<script>
+import * as d3Selection from 'd3-selection';
+import * as d3Axis from 'd3-axis';
+import * as d3Scale from 'd3-scale';
+import utcMultiTimeFormat from "@/plugins/timeConductor/utcMultiTimeFormat";
+
+//TODO: UI direction needed for the following property values
+const PADDING = 1;
+const OUTER_TEXT_PADDING = 12;
+const INNER_TEXT_PADDING = 17;
+const TEXT_LEFT_PADDING = 5;
+const ROW_PADDING = 12;
+// const DEFAULT_DURATION_FORMATTER = 'duration';
+const RESIZE_POLL_INTERVAL = 200;
+const PIXELS_PER_TICK = 100;
+const PIXELS_PER_TICK_WIDE = 200;
+const ROW_HEIGHT = 30;
+const LINE_HEIGHT = 12;
+const MAX_TEXT_WIDTH = 300;
+const TIMELINE_HEIGHT = 30;
+//This offset needs to be re-considered
+const TIMELINE_OFFSET_HEIGHT = 70;
+const GROUP_OFFSET = 100;
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    props: {
+        "renderingEngine": {
+            type: String,
+            default() {
+                return 'canvas';
+            }
+        }
+    },
+    mounted() {
+        this.validateJSON(this.domainObject.selectFile.body);
+        if (this.renderingEngine === 'svg') {
+            this.useSVG = true;
+        }
+
+        this.container = d3Selection.select(this.$refs.axisHolder);
+        this.svgElement = this.container.append("svg:svg");
+        // draw x axis with labels. CSS is used to position them.
+        this.axisElement = this.svgElement.append("g")
+            .attr("class", "axis");
+        this.xAxis = d3Axis.axisTop();
+
+        this.canvas = this.container.append('canvas').node();
+        this.canvasContext = this.canvas.getContext('2d');
+
+        this.setDimensions();
+        this.updateViewBounds();
+        this.openmct.time.on("timeSystem", this.setScaleAndPlotActivities);
+        this.openmct.time.on("bounds", this.updateViewBounds);
+        this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
+    },
+    destroyed() {
+        clearInterval(this.resizeTimer);
+        this.openmct.time.off("timeSystem", this.setScaleAndPlotActivities);
+        this.openmct.time.off("bounds", this.updateViewBounds);
+    },
+    methods: {
+        resize() {
+            if (this.$refs.axisHolder.clientWidth !== this.width) {
+                this.setDimensions();
+                this.updateViewBounds();
+            }
+        },
+        validateJSON(jsonString) {
+            try {
+                this.json = JSON.parse(jsonString);
+            } catch (e) {
+                return false;
+            }
+
+            return true;
+        },
+        updateViewBounds() {
+            this.viewBounds = this.openmct.time.bounds();
+            // this.viewBounds.end = this.viewBounds.end + (30 * 60 * 1000);
+            this.setScaleAndPlotActivities();
+        },
+        updateNowMarker() {
+            if (this.openmct.time.clock() === undefined) {
+                let nowMarker = document.querySelector('.nowMarker');
+                if (nowMarker) {
+                    nowMarker.parentNode.removeChild(nowMarker);
+                }
+            } else {
+                let nowMarker = document.querySelector('.nowMarker');
+                if (nowMarker) {
+                    const svgEl = d3Selection.select(this.svgElement).node();
+                    const height = this.useSVG ? svgEl.style('height') : this.canvas.height + 'px';
+                    nowMarker.style.height = height;
+                    const now = this.xScale(Date.now());
+                    nowMarker.style.left = now + GROUP_OFFSET + 'px';
+                }
+            }
+        },
+        setScaleAndPlotActivities() {
+            this.setScale();
+            this.clearPreviousActivities();
+            if (this.xScale) {
+                this.calculatePlanLayout();
+                this.drawPlan();
+                this.updateNowMarker();
+            }
+        },
+        clearPreviousActivities() {
+            if (this.useSVG) {
+                d3Selection.selectAll("svg > :not(g)").remove();
+            } else {
+                this.canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            }
+        },
+        setDimensions() {
+            const axisHolder = this.$refs.axisHolder;
+            const rect = axisHolder.getBoundingClientRect();
+            this.left = Math.round(rect.left);
+            this.top = Math.round(rect.top);
+            this.width = axisHolder.clientWidth;
+            this.offsetWidth = this.width - GROUP_OFFSET;
+
+            const axisHolderParent = this.$parent.$refs.planHolder;
+            this.height = Math.round(axisHolderParent.getBoundingClientRect().height);
+
+            if (this.useSVG) {
+                this.svgElement.attr("width", this.width);
+                this.svgElement.attr("height", this.height);
+            } else {
+                this.svgElement.attr("height", 50);
+                this.canvas.width = this.width;
+                this.canvas.height = this.height;
+            }
+
+            this.canvasContext.font = "normal normal 12px sans-serif";
+        },
+        setScale(timeSystem) {
+            if (!this.width) {
+                return;
+            }
+
+            if (timeSystem === undefined) {
+                timeSystem = this.openmct.time.timeSystem();
+            }
+
+            if (timeSystem.isUTCBased) {
+                this.xScale = d3Scale.scaleUtc();
+                this.xScale.domain(
+                    [new Date(this.viewBounds.start), new Date(this.viewBounds.end)]
+                );
+            } else {
+                this.xScale = d3Scale.scaleLinear();
+                this.xScale.domain(
+                    [this.viewBounds.start, this.viewBounds.end]
+                );
+            }
+
+            this.xScale.range([PADDING, this.offsetWidth - PADDING * 2]);
+
+            this.xAxis.scale(this.xScale);
+            this.xAxis.tickFormat(utcMultiTimeFormat);
+
+            this.axisElement.call(this.xAxis);
+
+            if (this.width > 1800) {
+                this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK_WIDE);
+            } else {
+                this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK);
+            }
+        },
+        isActivityInBounds(activity) {
+            return (activity.start < this.viewBounds.end) && (activity.end > this.viewBounds.start);
+        },
+        getTextWidth(name) {
+            // canvasContext.font = font;
+            let metrics = this.canvasContext.measureText(name);
+
+            return parseInt(metrics.width, 10);
+        },
+        sortFn(a, b) {
+            const numA = parseInt(a, 10);
+            const numB = parseInt(b, 10);
+            if (numA > numB) {
+                return 1;
+            }
+
+            if (numA < numB) {
+                return -1;
+            }
+
+            return 0;
+        },
+        // Get the row where the next activity will land.
+        getRowForActivity(rectX, width, defaultActivityRow = 0) {
+            let currentRow;
+            let sortedActivityRows = Object.keys(this.activitiesByRow).sort(this.sortFn);
+
+            function getOverlap(rects) {
+                return rects.every(rect => {
+                    const { start, end } = rect;
+                    const calculatedEnd = rectX + width;
+                    const hasOverlap = (rectX >= start && rectX <= end) || (calculatedEnd >= start && calculatedEnd <= end) || (rectX <= start && calculatedEnd >= end);
+
+                    return !hasOverlap;
+                });
+            }
+
+            for (let i = 0; i < sortedActivityRows.length; i++) {
+                let row = sortedActivityRows[i];
+                if (getOverlap(this.activitiesByRow[row])) {
+                    currentRow = row;
+                    break;
+                }
+            }
+
+            if (currentRow === undefined && sortedActivityRows.length) {
+                currentRow = parseInt(sortedActivityRows[sortedActivityRows.length - 1], 10) + ROW_HEIGHT + ROW_PADDING;
+            }
+
+            return (currentRow || defaultActivityRow);
+        },
+        calculatePlanLayout() {
+            this.activitiesByRow = {};
+
+            let currentRow = 0;
+
+            let groups = Object.keys(this.json);
+            groups.forEach((key, index) => {
+                let activities = this.json[key];
+                //set the currentRow to the beginning of the next logical row
+                currentRow = currentRow + ROW_HEIGHT * index;
+                let newGroup = true;
+                activities.forEach((activity) => {
+                    if (this.isActivityInBounds(activity)) {
+                        const currentStart = Math.max(this.viewBounds.start, activity.start);
+                        const currentEnd = Math.min(this.viewBounds.end, activity.end);
+                        const rectX = this.xScale(currentStart);
+                        const rectY = this.xScale(currentEnd);
+                        const rectWidth = rectY - rectX;
+
+                        const activityNameWidth = this.getTextWidth(activity.name) + TEXT_LEFT_PADDING;
+                        //TODO: Fix bug for SVG where the rectWidth is not proportional to the canvas measuredWidth of the text
+                        const activityNameFitsRect = (rectWidth >= activityNameWidth);
+                        const textStart = (activityNameFitsRect ? rectX : (rectX + rectWidth)) + TEXT_LEFT_PADDING;
+
+                        let textLines = this.getActivityDisplayText(this.canvasContext, activity.name, activityNameFitsRect);
+                        const textWidth = textStart + this.getTextWidth(textLines[0]) + TEXT_LEFT_PADDING;
+
+                        if (activityNameFitsRect) {
+                            currentRow = this.getRowForActivity(rectX, rectWidth);
+                        } else {
+                            currentRow = this.getRowForActivity(rectX, textWidth);
+                        }
+
+                        let textY = parseInt(currentRow, 10) + (activityNameFitsRect ? INNER_TEXT_PADDING : OUTER_TEXT_PADDING);
+
+                        if (!this.activitiesByRow[currentRow]) {
+                            this.activitiesByRow[currentRow] = [];
+                        }
+
+                        this.activitiesByRow[currentRow].push({
+                            heading: newGroup ? key : '',
+                            activity: {
+                                color: activity.color,
+                                textColor: activity.textColor
+                            },
+                            textLines: textLines,
+                            textStart: textStart,
+                            textY: textY,
+                            start: rectX,
+                            end: activityNameFitsRect ? rectX + rectWidth : textStart + textWidth,
+                            rectWidth: rectWidth
+                        });
+                        newGroup = false;
+                    }
+                });
+            });
+        },
+        getActivityDisplayText(context, text, activityNameFitsRect) {
+        //TODO: If the activity start is less than viewBounds.start then the text should be cropped on the left/should be off-screen)
+            let words = text.split(' ');
+            let line = '';
+            let activityText = [];
+            let rows = 1;
+
+            for (let n = 0; (n < words.length) && (rows <= 2); n++) {
+                let testLine = line + words[n] + ' ';
+                let metrics = context.measureText(testLine);
+                let testWidth = metrics.width;
+                if (!activityNameFitsRect && (testWidth > MAX_TEXT_WIDTH && n > 0)) {
+                    activityText.push(line);
+                    line = words[n] + ' ';
+                    testLine = line + words[n] + ' ';
+                    rows = rows + 1;
+                }
+
+                line = testLine;
+            }
+
+            return activityText.length ? activityText : [line];
+        },
+        getGroupHeading(row) {
+            let groupHeadingRow;
+            let groupHeadingBorder;
+
+            if (row) {
+                groupHeadingBorder = row + ROW_PADDING + OUTER_TEXT_PADDING;
+                groupHeadingRow = groupHeadingBorder + OUTER_TEXT_PADDING;
+            } else {
+                groupHeadingRow = TIMELINE_HEIGHT + OUTER_TEXT_PADDING;
+            }
+
+            return {
+                groupHeadingRow,
+                groupHeadingBorder
+            };
+        },
+        getPlanHeight(activityRows) {
+            return parseInt(activityRows[activityRows.length - 1], 10) + TIMELINE_OFFSET_HEIGHT;
+        },
+        drawPlan() {
+            const activityRows = Object.keys(this.activitiesByRow);
+            if (activityRows.length) {
+
+                let planHeight = this.getPlanHeight(activityRows);
+                planHeight = Math.max(this.height, planHeight);
+                if (this.useSVG) {
+                    this.svgElement.attr("height", planHeight);
+                } else {
+                    // This needs to happen before we draw on the canvas or the canvas will get wiped out when height is set
+                    this.canvas.height = planHeight;
+                }
+
+                activityRows.forEach((key) => {
+                    const items = this.activitiesByRow[key];
+                    const row = parseInt(key, 10);
+                    items.forEach((item) => {
+
+                        //TODO: Don't draw the left-border of the rectangle if the activity started before viewBounds.start
+                        if (this.useSVG) {
+                            this.plotSVG(item, row);
+                        } else {
+                            this.plotCanvas(item, row);
+                        }
+
+                    });
+
+                });
+            }
+        },
+        plotSVG(item, row) {
+            const headingText = item.heading;
+            const { groupHeadingRow, groupHeadingBorder } = this.getGroupHeading(row);
+
+            if (headingText) {
+                if (groupHeadingBorder) {
+                    this.svgElement.append("line")
+                        .attr("class", "activity")
+                        .attr("x1", 0)
+                        .attr("y1", groupHeadingBorder)
+                        .attr("x2", this.width)
+                        .attr("y2", groupHeadingBorder)
+                        .attr('stroke', "white");
+                }
+
+                this.svgElement.append("text").text(headingText)
+                    .attr("class", "activity")
+                    .attr("x", 0)
+                    .attr("y", groupHeadingRow)
+                    .attr('fill', "white");
+            }
+
+            const activity = item.activity;
+            const rectY = row + TIMELINE_HEIGHT;
+            this.svgElement.append("rect")
+                .attr("class", "activity")
+                .attr("x", item.start + GROUP_OFFSET)
+                .attr("y", rectY + TIMELINE_HEIGHT)
+                .attr("width", item.rectWidth)
+                .attr("height", ROW_HEIGHT)
+                .attr('fill', activity.color)
+                .attr('stroke', "lightgray");
+
+            item.textLines.forEach((line, index) => {
+                this.svgElement.append("text").text(line)
+                    .attr("class", "activity")
+                    .attr("x", item.textStart + GROUP_OFFSET)
+                    .attr("y", item.textY + TIMELINE_HEIGHT + (index * LINE_HEIGHT))
+                    .attr('fill', activity.textColor);
+            });
+            //TODO: Ending border
+        },
+        plotCanvas(item, row) {
+            const headingText = item.heading;
+            const { groupHeadingRow, groupHeadingBorder } = this.getGroupHeading(row);
+
+            if (headingText) {
+                if (groupHeadingBorder) {
+                    this.canvasContext.strokeStyle = "white";
+                    this.canvasContext.beginPath();
+                    this.canvasContext.moveTo(0, groupHeadingBorder);
+                    this.canvasContext.lineTo(this.width, groupHeadingBorder);
+                    this.canvasContext.stroke();
+                }
+
+                this.canvasContext.fillStyle = "white";
+                this.canvasContext.fillText(headingText, 0, groupHeadingRow);
+            }
+
+            const activity = item.activity;
+            const rectX = item.start;
+            const rectY = row + TIMELINE_HEIGHT;
+            const rectWidth = item.rectWidth;
+            this.canvasContext.fillStyle = activity.color;
+            this.canvasContext.strokeStyle = "lightgray";
+            this.canvasContext.fillRect(rectX + GROUP_OFFSET, rectY, rectWidth, ROW_HEIGHT);
+            this.canvasContext.strokeRect(rectX + GROUP_OFFSET, rectY, rectWidth, ROW_HEIGHT);
+
+            this.canvasContext.fillStyle = activity.textColor;
+
+            item.textLines.forEach((line, index) => {
+                this.canvasContext.fillText(line, item.textStart + GROUP_OFFSET, item.textY + TIMELINE_HEIGHT + (index * LINE_HEIGHT));
+            });
+            //TODO: Ending border
+        }
+    }
+};
+</script>
diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue
new file mode 100644
index 0000000000..c61214c833
--- /dev/null
+++ b/src/plugins/timeline/TimelineViewLayout.vue
@@ -0,0 +1,45 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2020, United States Government
+* as represented by the Administrator of the National Aeronautics and Space
+* Administration. All rights reserved.
+*
+* Open MCT is licensed under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+* http://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* Open MCT includes source code licensed under additional open source
+* licenses. See the Open Source Licenses file (LICENSES.md) included with
+* this source code distribution or the Licensing information page available
+* at runtime from the About dialog for additional information.
+*****************************************************************************/
+
+<template>
+<div ref="planHolder"
+     class="c-timeline"
+>
+    <plan :rendering-engine="'canvas'" />
+</div>
+</template>
+
+<script>
+import Plan from './Plan.vue';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    components: {
+        Plan
+    },
+    data() {
+        return {
+            plans: []
+        };
+    }
+};
+</script>
diff --git a/src/plugins/timeline/TimelineViewProvider.js b/src/plugins/timeline/TimelineViewProvider.js
new file mode 100644
index 0000000000..7d968f8f9e
--- /dev/null
+++ b/src/plugins/timeline/TimelineViewProvider.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import TimelineViewLayout from './TimelineViewLayout.vue';
+import Vue from 'vue';
+
+export default function TimelineViewProvider(openmct) {
+
+    return {
+        key: 'timeline.view',
+        name: 'Timeline',
+        cssClass: 'icon-clock',
+        canView(domainObject) {
+            return domainObject.type === 'plan';
+        },
+
+        canEdit(domainObject) {
+            return domainObject.type === 'plan';
+        },
+
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            TimelineViewLayout
+                        },
+                        provide: {
+                            openmct,
+                            domainObject
+                        },
+                        template: '<timeline-view-layout></timeline-view-layout>'
+                    });
+                },
+                destroy: function () {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        }
+    };
+}
diff --git a/src/plugins/timeline/activities.json b/src/plugins/timeline/activities.json
new file mode 100644
index 0000000000..35878c3fc8
--- /dev/null
+++ b/src/plugins/timeline/activities.json
@@ -0,0 +1,38 @@
+{
+  "ROVER": [
+    {
+      "name": "Activity 1",
+      "start": 1597170002854,
+      "end": 1597171032854,
+      "type": "ROVER",
+      "color": "fuchsia",
+      "textColor": "black"
+    },
+    {
+      "name": "Activity 2",
+      "start": 1597171132854,
+      "end": 1597171232854,
+      "type": "ROVER",
+      "color": "fuchsia",
+      "textColor": "black"
+    },
+    {
+      "name": "Activity 4",
+      "start": 1597171132854,
+      "end": 1597171232854,
+      "type": "ROVER",
+      "color": "fuchsia",
+      "textColor": "black"
+    }
+  ],
+  "VIPER": [
+    {
+      "name": "Activity 3",
+      "start": 1597170132854,
+      "end": 1597171202854,
+      "type": "VIPER",
+      "color": "fuchsia",
+      "textColor": "black"
+    }
+  ]
+}
diff --git a/src/plugins/timeline/plugin.js b/src/plugins/timeline/plugin.js
new file mode 100644
index 0000000000..8d39f7b26a
--- /dev/null
+++ b/src/plugins/timeline/plugin.js
@@ -0,0 +1,49 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import TimelineViewProvider from './TimelineViewProvider';
+
+export default function () {
+    return function install(openmct) {
+        openmct.types.addType('plan', {
+            name: 'Plan',
+            key: 'plan',
+            description: 'An activity timeline',
+            creatable: true,
+            cssClass: 'icon-timeline',
+            form: [
+                {
+                    name: 'Upload Plan (JSON File)',
+                    key: 'selectFile',
+                    control: 'file-input',
+                    required: true,
+                    text: 'Select File',
+                    type: 'application/json'
+                }
+            ],
+            initialize: function (domainObject) {
+            }
+        });
+        openmct.objectViews.addProvider(new TimelineViewProvider(openmct));
+    };
+}
+
diff --git a/src/plugins/timeline/pluginSpec.js b/src/plugins/timeline/pluginSpec.js
new file mode 100644
index 0000000000..c14e496c23
--- /dev/null
+++ b/src/plugins/timeline/pluginSpec.js
@@ -0,0 +1,205 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from "utils/testing";
+import TimelinePlugin from "./plugin";
+import Vue from 'vue';
+import TimelineViewLayout from "./TimelineViewLayout.vue";
+
+describe('the plugin', function () {
+    let planDefinition;
+    let element;
+    let child;
+    let openmct;
+
+    beforeEach((done) => {
+        const appHolder = document.createElement('div');
+        appHolder.style.width = '640px';
+        appHolder.style.height = '480px';
+
+        openmct = createOpenMct();
+        openmct.install(new TimelinePlugin());
+
+        planDefinition = openmct.types.get('plan').definition;
+
+        element = document.createElement('div');
+        element.style.width = '640px';
+        element.style.height = '480px';
+        child = document.createElement('div');
+        child.style.width = '640px';
+        child.style.height = '480px';
+        element.appendChild(child);
+
+        openmct.time.bounds({
+            start: 1597160002854,
+            end: 1597181232854
+        });
+
+        openmct.on('start', done);
+        openmct.startHeadless(appHolder);
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    let mockPlanObject = {
+        name: 'Plan',
+        key: 'plan',
+        creatable: true
+    };
+
+    it('defines a plan object type with the correct key', () => {
+        expect(planDefinition.key).toEqual(mockPlanObject.key);
+    });
+
+    describe('the plan object', () => {
+
+        it('is creatable', () => {
+            expect(planDefinition.creatable).toEqual(mockPlanObject.creatable);
+        });
+
+        it('provides a timeline view', () => {
+            const testViewObject = {
+                id: "test-object",
+                type: "plan"
+            };
+
+            const applicableViews = openmct.objectViews.get(testViewObject);
+            let timelineView = applicableViews.find((viewProvider) => viewProvider.key === 'timeline.view');
+            expect(timelineView).toBeDefined();
+        });
+
+    });
+
+    describe('the timeline view displays activities', () => {
+        let planDomainObject;
+        let component;
+        let planViewComponent;
+
+        beforeEach((done) => {
+            planDomainObject = {
+                type: 'plan',
+                id: "test-object",
+                selectFile: {
+                    body: JSON.stringify({
+                        "TEST-GROUP": [
+                            {
+                                "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+                                "start": 1597170002854,
+                                "end": 1597171032854,
+                                "type": "TEST-GROUP",
+                                "color": "fuchsia",
+                                "textColor": "black"
+                            },
+                            {
+                                "name": "Sed ut perspiciatis",
+                                "start": 1597171132854,
+                                "end": 1597171232854,
+                                "type": "TEST-GROUP",
+                                "color": "fuchsia",
+                                "textColor": "black"
+                            }
+                        ]
+                    })
+                }
+            };
+
+            let viewContainer = document.createElement('div');
+            child.append(viewContainer);
+            component = new Vue({
+                provide: {
+                    openmct: openmct,
+                    domainObject: planDomainObject
+                },
+                el: viewContainer,
+                components: {
+                    TimelineViewLayout
+                },
+                template: '<timeline-view-layout/>'
+            });
+
+            return Vue.nextTick().then(() => {
+                planViewComponent = component.$root.$children[0].$children[0];
+                setTimeout(() => {
+                    clearInterval(planViewComponent.resizeTimer);
+                    //TODO: this is a hack to ensure the canvas has a width - maybe there's a better way to set the width of the plan div
+                    planViewComponent.width = 1200;
+                    planViewComponent.setScaleAndPlotActivities();
+                    done();
+                }, 300);
+            });
+        });
+
+        it('loads activities into the view', () => {
+            expect(planViewComponent.json).toBeDefined();
+            expect(planViewComponent.json["TEST-GROUP"].length).toEqual(2);
+        });
+
+        it('loads a time axis into the view', () => {
+            let ticks = planViewComponent.axisElement.node().querySelectorAll('g.tick');
+            expect(ticks.length).toEqual(11);
+        });
+
+        it('calculates the activity layout', () => {
+            const expectedActivitiesByRow = {
+                "0": [
+                    {
+                        "heading": "TEST-GROUP",
+                        "activity": {
+                            "color": "fuchsia",
+                            "textColor": "black"
+                        },
+                        "textLines": [
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
+                            "sed sed do eiusmod tempor incididunt ut labore et "
+                        ],
+                        "textStart": -47.51342439943476,
+                        "textY": 12,
+                        "start": -47.51625058878945,
+                        "end": 204.97315120113046,
+                        "rectWidth": -4.9971738106453145
+                    }
+                ],
+                "42": [
+                    {
+                        "heading": "",
+                        "activity": {
+                            "color": "fuchsia",
+                            "textColor": "black"
+                        },
+                        "textLines": [
+                            "Sed ut perspiciatis "
+                        ],
+                        "textStart": -48.483749411210546,
+                        "textY": 54,
+                        "start": -52.99858690532266,
+                        "end": 9.032501177578908,
+                        "rectWidth": -0.48516250588788523
+                    }
+                ]
+            };
+            expect(Object.keys(planViewComponent.activitiesByRow)).toEqual(Object.keys(expectedActivitiesByRow));
+        });
+    });
+
+});
diff --git a/src/plugins/timeline/timeline-axis.scss b/src/plugins/timeline/timeline-axis.scss
new file mode 100644
index 0000000000..efdf7de7c7
--- /dev/null
+++ b/src/plugins/timeline/timeline-axis.scss
@@ -0,0 +1,57 @@
+.c-timeline {
+  $h: 18px;
+  $tickYPos: ($h / 2) + 12px + 10px;
+  $tickXPos: 100px;
+
+  height: 100%;
+
+  svg {
+    text-rendering: geometricPrecision;
+    width: 100%;
+    height: 100%;
+    > g.axis {
+      // Overall Tick holder
+      transform: translateY($tickYPos) translateX($tickXPos);
+
+      g {
+         //Each tick. These move on drag.
+        line {
+          // Line beneath ticks
+          display: none;
+        }
+      }
+    }
+
+    text:not(.activity) {
+      // Tick labels
+      fill: $colorBodyFg;
+      font-size: 1em;
+      paint-order: stroke;
+      font-weight: bold;
+      stroke: $colorBodyBg;
+      stroke-linecap: butt;
+      stroke-linejoin: bevel;
+      stroke-width: 6px;
+    }
+
+    text.activity {
+      stroke: none;
+    }
+  }
+
+
+
+  .nowMarker {
+    width: 2px;
+    position: absolute;
+    z-index: 10;
+    background: gray;
+
+    & .icon-arrow-down {
+      font-size: large;
+      position: absolute;
+      top: -8px;
+      left: -8px;
+    }
+  }
+}
diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss
index 3d9e24960d..1713be5504 100644
--- a/src/styles/vue-styles.scss
+++ b/src/styles/vue-styles.scss
@@ -26,6 +26,7 @@
 @import "../plugins/timeConductor/conductor-mode.scss";
 @import "../plugins/timeConductor/conductor-mode-icon.scss";
 @import "../plugins/timeConductor/date-picker.scss";
+@import "../plugins/timeline/timeline-axis.scss";
 @import "../ui/components/object-frame.scss";
 @import "../ui/components/object-label.scss";
 @import "../ui/components/progress-bar.scss";