5 files changed, 21 insertions, 8 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 6525f3b07..2578b47fc 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -33,6 +33,18 @@
                 outline-color: black;
             }
 
+            .collectionViewBaseChrome-button{
+                font-size: 75%;
+                text-transform: uppercase;
+                letter-spacing: 2px;
+                background: rgb(238, 238, 238);
+                color: grey;
+                outline-color: black;
+                border: none;
+                padding: 12px 10px 11px 10px;
+                margin-left: 50px;
+            }
+
             .collectionViewBaseChrome-collapse {
                 transition: all .5s;
                 position: absolute;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 9c751c4df..e91d31486 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -247,9 +247,13 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                                     <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
                                         APPLY FILTER
                             </button>
+                                    
                                 </div>
                             </div>
                         </div>
+                        <button className="collectionViewBaseChrome-button" >
+                            SHOW TIMELINE
+                        </button>
                     </div>
                     {this.subChrome()}
                 </div>
diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/nodes/Keyframe.scss
index 19a61bde1..11672388f 100644
--- a/src/client/views/nodes/Keyframe.scss
+++ b/src/client/views/nodes/Keyframe.scss
@@ -3,7 +3,6 @@
 .bar {
     height: 100%;
     width: 5px;
-    background-color: #4d9900;
     position: absolute;
     
     // pointer-events: none; 
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 82f5b18cc..6ff925cb5 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -322,7 +322,7 @@ export class Keyframe extends React.Component<IProps> {
     render() {
         return (
             <div>
-                <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px` }}
+                <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px`, background: `linear-gradient(90deg, rgba(77, 153, 0, 0) 0%, rgba(77, 153, 0, 1) ${this.regiondata.fadeIn / this.regiondata.duration * 100}%, rgba(77, 153, 0, 1) ${(this.regiondata.duration - this.regiondata.fadeOut)/this.regiondata.duration * 100}%, rgba(77, 153, 0, 0) 100% )` }}
                     onPointerDown={this.onBarPointerDown}
                     onDoubleClick={this.createKeyframe}
                     onContextMenu={action((e: React.MouseEvent) => {
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index e4302e721..39f83639c 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -113,7 +113,7 @@ export class Track extends React.Component<IProps> {
             let rightkf: (Doc | undefined) = await this.calcMinRight(regiondata!); //right keyframe, if it exists            
             let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata!); //if the scrubber is on top of the keyframe
             if (currentkf) {
-                this.applyKeys(currentkf);
+                await this.applyKeys(currentkf);
                 this._keyReaction = this.keyReaction(); //reactivates reaction. 
             } else if (leftkf && rightkf) {
                 this.interpolate(leftkf, rightkf);
@@ -122,12 +122,11 @@ export class Track extends React.Component<IProps> {
     }
 
     @action
-    private applyKeys = (kf: Doc) => {
-        let kfNode = Cast(kf.key, Doc) as Doc; 
+    private applyKeys = async (kf: Doc) => {
+        let kfNode = await Cast(kf.key, Doc) as Doc; 
         let docFromApply = kfNode; 
         if (this.filterKeys(Doc.allKeys(this.props.node)).length > this.filterKeys(Doc.allKeys(kfNode)).length) docFromApply = this.props.node; 
         this.filterKeys(Doc.allKeys(docFromApply)).forEach(key => {
-            // if (key === "title" || key === "documentText") Doc.SetOnPrototype(this.props.node, key, StrCast(kf[key]));
             if (!kfNode[key]) {
                 this.props.node[key] = undefined; 
             } else {
@@ -205,8 +204,7 @@ export class Track extends React.Component<IProps> {
                 const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
                 const adjusted = diff * ratio;
                 this.props.node[key] = NumCast(leftNode[key]) + adjusted;
-            } else if (key === "title" || key === "documentText") {
-                Doc.SetOnPrototype(this.props.node, key, StrCast(leftNode[key]));
+            } else {
                 this.props.node[key] = leftNode[key];
             }
         });