Make expanded track groups not overflow (#113)

* Make expanded track groups not overflow * First line of text is always readable * Fix resize resetting
eclipsesource · Jun 4, 2024 · 40fe294 · 40fe294
1 parent 9827b4e
commit 40fe294
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 30 deletions.
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
@@ -733,6 +733,9 @@ button.query-ctrl {
     background-color: var(--collapsed-background);
     color: var(--main-foreground-color);
     font-weight: bold;
+    .shell {
+      overflow: hidden;
+    }
     span.chip {
       color: #121212;
     }
@@ -742,7 +745,7 @@ button.query-ctrl {
     display: grid;
     grid-template-areas: "fold-button title buttons";
     grid-template-columns: 28px 1fr auto;
-    align-items: center;
+    align-items: baseline;
     line-height: 1;
     width: var(--track-shell-width);
     transition: background-color 0.4s;
@@ -776,8 +779,12 @@ button.query-ctrl {
     }
     h1 {
       @include track_shell_title();
+      position: relative;
+      top: -5px;
     }
     .fold-button {
+      position: relative;
+      top: -5px;
       grid-area: fold-button;
     }
     .track-button {

diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
@@ -55,6 +55,7 @@ export class TrackGroupPanel extends Panel<Attrs> {
   private summaryTrack: Track|undefined;
   private dragging = false;
   private dropping: 'before'|'after'|undefined = undefined;
+  // private overFlown = false;
 
   // Caches the last state.trackGroups[this.trackGroupId].
   // This is to deal with track group deletion. See comments
@@ -102,12 +103,13 @@ export class TrackGroupPanel extends Panel<Attrs> {
   resize = (e: MouseEvent): void => {
     e.stopPropagation();
     e.preventDefault();
-    let y = e.offsetY;
-    let previousClientY = e.clientY;
+    if(!this.summaryTrack){
+      return;
+    }
+    let y = this.summaryTrack.getHeight()
     const mouseMoveEvent = (evMove: MouseEvent): void => {
       evMove.preventDefault();
-      y += (evMove.clientY -previousClientY);
-      previousClientY = evMove.clientY;
+      y += evMove.movementY;
       if (this.attrs && this.initialHeight) {
         const newMultiplier = y / this.initialHeight;
         if (newMultiplier < 1) {
@@ -119,8 +121,8 @@ export class TrackGroupPanel extends Panel<Attrs> {
       }
     };
     const mouseUpEvent = (): void => {
-        document.removeEventListener('mousemove', mouseMoveEvent);
-        document.removeEventListener('mouseup', mouseUpEvent);
+      document.removeEventListener('mousemove', mouseMoveEvent);
+      document.removeEventListener('mouseup', mouseUpEvent);
     };
     document.addEventListener('mousemove', mouseMoveEvent);
     document.addEventListener('mouseup', mouseUpEvent);
@@ -130,8 +132,8 @@ export class TrackGroupPanel extends Panel<Attrs> {
   onmousemove(e: MouseEvent) {
     if (this.summaryTrack && this.summaryTrack.supportsResizing) {
       if (e.currentTarget instanceof HTMLElement &&
-          e.offsetY >=
-          e.currentTarget.scrollHeight - MOUSE_TARGETING_THRESHOLD_PX
+          e.pageY - e.currentTarget.getBoundingClientRect().top >=
+          e.currentTarget.clientHeight - MOUSE_TARGETING_THRESHOLD_PX
           ) {
             document.addEventListener('mousedown', this.resize);
           e.currentTarget.style.cursor = 'row-resize';
@@ -200,7 +202,7 @@ export class TrackGroupPanel extends Panel<Attrs> {
       {} :
       {style: {marginLeft: `${depth/2}rem`}};
 
-    const titleStyling = indent(depth(trackGroup));
+    const marginStyling = indent(depth(trackGroup));
     const dragClass = this.dragging ? `drag` : '';
     const dropClass = this.dropping ? `drop-${this.dropping}` : '';
     return m(
@@ -234,19 +236,19 @@ export class TrackGroupPanel extends Panel<Attrs> {
           },
 
           m('.fold-button',
-            {...titleStyling},
+            {...marginStyling},
             m('i.material-icons',
               this.trackGroupState.collapsed ? CHEVRON_RIGHT : EXPAND_DOWN)),
-          m('.title-wrapper',
-            {...titleStyling},
-            m('h1.track-title',
-              {title: trackGroup.description},
-              name,
-              ('namespace' in this.summaryTrackState.config) &&
-                  m('span.chip', 'metric')),
-            (this.trackGroupState.collapsed && child !== null) ?
-              m('h2.track-subtitle', child) :
-                null),
+          m('h1.track-title',
+            {style: {
+              ...marginStyling.style,
+            }, title: trackGroup.description},
+            name,
+            ('namespace' in this.summaryTrackState.config) &&
+                m('span.chip', 'metric')),
+          (this.trackGroupState.collapsed && child !== null) ?
+            m('h2.track-subtitle', child) :
+              null,
           m('.track-buttons', ...this.getTrackGroupActionButtons(),
             selection && selection.kind === 'AREA' ?
               m('i.material-icons.track-button',
@@ -356,6 +358,8 @@ export class TrackGroupPanel extends Panel<Attrs> {
 
   onupdate({dom}: m.CVnodeDOM<Attrs>) {
     const shell = assertExists(dom.querySelector('.shell'));
+    // const trackTitle = dom.querySelector('.track-title')!;
+    // this.overFlown =  trackTitle.scrollHeight >= trackTitle.clientHeight;
     this.shellWidth = shell.getBoundingClientRect().width;
     // TODO(andrewbb): move this to css_constants
     this.backgroundColor =

diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
@@ -75,7 +75,6 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
   private dragging = false;
   private dropping: 'before'|'after'|undefined = undefined;
   private attrs?: TrackShellAttrs;
-
   private initialHeight?: number;
 
   oninit(vnode: m.Vnode<TrackShellAttrs>) {
@@ -187,12 +186,13 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
   resize = (e: MouseEvent): void => {
     e.stopPropagation();
     e.preventDefault();
-    let y = e.offsetY;
-    let previousClientY = e.clientY;
+    if (!this.attrs) {
+      return;
+    }
+    let y = this.attrs.track.getHeight();
     const mouseMoveEvent = (evMove: MouseEvent): void => {
-        evMove.preventDefault();
-        y += (evMove.clientY -previousClientY);
-        previousClientY = evMove.clientY;
+      evMove.preventDefault();
+      y += evMove.movementY;
         if (this.attrs && this.initialHeight) {
           const newMultiplier = y / this.initialHeight;
           if (newMultiplier < 1) {
@@ -204,8 +204,8 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
         }
     };
     const mouseUpEvent = (): void => {
-        document.removeEventListener('mousemove', mouseMoveEvent);
-        document.removeEventListener('mouseup', mouseUpEvent);
+      document.removeEventListener('mousemove', mouseMoveEvent);
+      document.removeEventListener('mouseup', mouseUpEvent);
     };
     document.addEventListener('mousemove', mouseMoveEvent);
     document.addEventListener('mouseup', mouseUpEvent);
@@ -215,7 +215,8 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
   onmousemove(e: MouseEvent) {
     if (this.attrs?.track.supportsResizing) {
       if (e.currentTarget instanceof HTMLElement &&
-        e.offsetY >= e.currentTarget.scrollHeight - 5) {
+        e.pageY - e.currentTarget.getBoundingClientRect().top >=
+          e.currentTarget.clientHeight - 5) {
             document.addEventListener('mousedown', this.resize);
           e.currentTarget.style.cursor = 'row-resize';
           return;