Make pinned tracks scrollable (#135)

* Make pinned tracks scrollable

* Add Resize logic to the pinned track section

Author: ALevansSamsung

ui/src/assets/common.scss

@@ -470,7 +470,6 @@ $bottom-tab-padding: 10px;
   overflow-x: hidden;
   overflow-y: auto;
   flex: 1 1 auto;
-  will-change: transform; // Force layer creation.
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
@@ -492,7 +491,7 @@ $bottom-tab-padding: 10px;
   grid-template-areas: "space";
 }
 
-.pinned-panel-container {
+.overview-panel-container {
   position: relative;
   // Override top level overflow: hidden so height of this flex item can be
   // its content height.
@@ -525,7 +524,7 @@ canvas.main-canvas {
   user-select: none;
 }
 
-.scrolling-panel-container > .panels > *:last-child {
+.scrolling-panel-container:not(.pinned-group) > .panels > *:last-child {
   margin-bottom: 500px;
 }
 

ui/src/common/actions.ts

@@ -1558,6 +1558,12 @@ export const StateActions = {
     _: {}) {
       state.pinnedGroupCollapsed = !state.pinnedGroupCollapsed;
   },
+
+  setPinnedPanelHeight(
+    state: StateDraft,
+    args: {newHeight: number}) {
+      state.pinnedPanelHeight = args.newHeight;
+  },
   clearTrackAndGroupSelection(
     state: StateDraft,
     _: {},

ui/src/common/empty_state.ts

@@ -172,6 +172,7 @@ export function createEmptyState(): State {
 
     filteredTracks: [],
     pinnedGroupCollapsed: false,
+    pinnedPanelHeight: 400,
     selectedTrackGroupIds: new Set<string>(),
     selectedTrackIds: new Set<string>(),
   };

ui/src/common/state.ts

@@ -580,6 +580,7 @@ export interface State {
   visualisedArgs: string[];
   filteredTracks: AddTrackLikeArgs[];
   pinnedGroupCollapsed: boolean;
+  pinnedPanelHeight: number;
 
   /**
    * This state is updated on the frontend at 60Hz and eventually syncronised to

ui/src/frontend/viewer_page.ts

@@ -233,7 +233,57 @@ class TraceViewer implements m.ClassComponent<TraceViewerAttrs> {
     window.removeEventListener('resize', this.onResize);
     if (this.zoomContent) this.zoomContent.shutdown();
   }
+  pinnedTrackResize = (e: MouseEvent)=>{
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.currentTarget instanceof HTMLElement) {
+      const timelineElement = e.currentTarget.closest('div.pan-and-zoom-content');
+      if (timelineElement && timelineElement instanceof HTMLDivElement) {
+        let mouseY = e.clientY;
+        const mouseMoveEvent = (evMove: MouseEvent): void => {
+          evMove.preventDefault();
+          const movementY = evMove.clientY-mouseY;
+          globals.dispatch(
+            Actions.setPinnedPanelHeight(
+              {newHeight: globals.state.pinnedPanelHeight + movementY}));
+          mouseY = evMove.clientY;
 
+          globals.rafScheduler.scheduleFullRedraw();
+        };
+        const mouseReturnEvent = () : void => {
+          timelineElement.addEventListener('mousemove', mouseMoveEvent);
+          timelineElement.removeEventListener('mouseenter', mouseReturnEvent);
+        };
+        const mouseLeaveEvent = () : void => {
+          timelineElement.removeEventListener('mousemove', mouseMoveEvent);
+          timelineElement.addEventListener('mouseenter', mouseReturnEvent);
+        };
+        const mouseUpEvent = (): void => {
+          timelineElement.removeEventListener('mousemove', mouseMoveEvent);
+          document.removeEventListener('mouseup', mouseUpEvent);
+          timelineElement.removeEventListener('mouseenter', mouseReturnEvent);
+          timelineElement.removeEventListener('mouseleave', mouseLeaveEvent);
+        };
+        timelineElement.addEventListener('mousemove', mouseMoveEvent);
+        timelineElement.addEventListener('mouseleave', mouseLeaveEvent);
+        document.addEventListener('mouseup', mouseUpEvent);
+      }
+    }
+  };
+  checkPinnedResize = (e: MouseEvent) =>{
+    if (e.currentTarget instanceof HTMLElement &&
+      e.type !== 'mouseleave'
+      ) {
+      const timelineElement: HTMLDivElement | null = e.currentTarget.closest('div.pan-and-zoom-content');
+      timelineElement?.addEventListener('mousedown', this.pinnedTrackResize);
+      e.currentTarget.style.cursor = 'row-resize';
+      return;
+    } else if (e.currentTarget instanceof HTMLElement) {
+      const timelineElement: HTMLDivElement | null = e.currentTarget.closest('div.pan-and-zoom-content');
+      timelineElement?.removeEventListener('mousedown', this.pinnedTrackResize);
+      e.currentTarget.style.cursor = 'unset';
+    }
+  };
   view() {
     const rootNode: AnyAttrsVnode[] = [];
     const renderGroup = (group: TrackGroupState, panels: AnyAttrsVnode[]) => {
@@ -290,13 +340,14 @@ class TraceViewer implements m.ClassComponent<TraceViewerAttrs> {
     if (OVERVIEW_PANEL_FLAG.get()) {
       overviewPanel.push(m(OverviewTimelinePanel, {key: 'overview'}));
     }
-    const pinnedPanels: AnyAttrsVnode[] = [
+    const overviewPanels: AnyAttrsVnode[] = [
       ...overviewPanel,
       m(TimeAxisPanel, {key: 'timeaxis'}),
       m(TimeSelectionPanel, {key: 'timeselection'}),
       m(NotesPanel, {key: 'notes'}),
       m(TickmarkPanel, {key: 'searchTickmarks'}),
     ];
+    const pinnedPanels: AnyAttrsVnode[] = [];
     if (globals.state.pinnedTracks.length > 0) {
       pinnedPanels.push(m(TrackGroup, {
         header: m(MinimalTrackGroup, {
@@ -314,6 +365,7 @@ class TraceViewer implements m.ClassComponent<TraceViewerAttrs> {
       } as TrackGroupAttrs));
     }
 
+
     return m(
         '.page',
         m('.split-panel',
@@ -328,11 +380,28 @@ class TraceViewer implements m.ClassComponent<TraceViewerAttrs> {
                 globals.makeSelection(Actions.deselect({}));
               },
             },
-            m('.pinned-panel-container', m(PanelContainer, {
+            m('.overview-panel-container', m(PanelContainer, {
                 doesScroll: false,
-                panels: pinnedPanels,
+                panels: overviewPanels,
                 kind: 'OVERVIEW',
               })),
+            m('.scrolling-panel-container pinned-group', {style: {
+              minHeight: !globals.state.pinnedGroupCollapsed?globals.state.pinnedPanelHeight+ 'px': '18px',
+              height: !globals.state.pinnedGroupCollapsed?globals.state.pinnedPanelHeight+ 'px': '18px',
+            }}, m(PanelContainer, {
+              doesScroll: true,
+              panels: pinnedPanels,
+              kind: 'TRACKS',
+            })),
+            m('hr', {
+              style: {
+                width: '100%',
+                margin: '0',
+                cursor: 'row-resize',
+              },
+              onmousemove: this.checkPinnedResize,
+              onmouseleave: this.checkPinnedResize,
+            }),
             m('.scrolling-panel-container', m(PanelContainer, {
                 doesScroll: true,
                 panels: rootNode,