From 2ac7c217da301edf3c758abd1daf1e213583f8e7 Mon Sep 17 00:00:00 2001 From: Andrew Levans <121060410+ALevansSamsung@users.noreply.github.com> Date: Mon, 21 Oct 2024 16:09:05 -0500 Subject: [PATCH] [Design] Show timeline behind expanded track groups (#122) * Remove background for expanded track groups * Fix selection on expanded track groups * Recursively add selections when track group time selction * Make checkbox track selection less wonky * Don't select tracks twice when dragging over them and their parent group --- ui/src/assets/common.scss | 9 +++---- ui/src/common/actions.ts | 37 +++++++++++++++++++++++----- ui/src/frontend/panel_container.ts | 24 +++++++++++------- ui/src/frontend/track_group_panel.ts | 16 ++---------- 4 files changed, 51 insertions(+), 35 deletions(-) diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss index 1e35e51d2a..62a19a31bf 100644 --- a/ui/src/assets/common.scss +++ b/ui/src/assets/common.scss @@ -723,17 +723,11 @@ button.query-ctrl { opacity: 1; } &[collapsed="true"] { - .shell { - border-right: 1px solid var(--main-foreground-color); - background-color: var(--collapsed-background); - } .track-button { color: rgb(60, 86, 136); } } &[collapsed="false"] { - background-color: var(--collapsed-background); - color: var(--main-foreground-color); font-weight: bold; span.chip { color: #121212; @@ -746,8 +740,11 @@ button.query-ctrl { grid-template-columns: 28px 1fr auto; align-items: baseline; line-height: 1; + border-right: 1px solid var(--main-foreground-color); width: var(--track-shell-width); transition: background-color 0.4s; + background-color: var(--collapsed-background); + color: var(--main-foreground-color); overflow: hidden; &.selected { background-color: var(--track-highlight-background); diff --git a/ui/src/common/actions.ts b/ui/src/common/actions.ts index 02ee3bb84f..1e277f2ae5 100644 --- a/ui/src/common/actions.ts +++ b/ui/src/common/actions.ts @@ -1252,23 +1252,48 @@ export const StateActions = { const areaId = selection.areaId; const index = state.areas[areaId].tracks.indexOf(args.id); if (index > -1) { - state.areas[areaId].tracks.splice(index, 1); - if (args.isTrackGroup) { // Also remove all child tracks. - for (const childTrack of state.trackGroups[args.id].tracks) { + const removeTrackGroup = (id:string)=> { + const groupIndex = state.areas[areaId].tracks.indexOf(id); + // remove group + state.areas[areaId].tracks.splice(groupIndex, 1); + // Also remove all child tracks. + for (const childTrack of state.trackGroups[id].tracks) { const childIndex = state.areas[areaId].tracks.indexOf(childTrack); if (childIndex > -1) { state.areas[areaId].tracks.splice(childIndex, 1); } } + // Also remove all child track groups. + for (const childTrack of state.trackGroups[id].subgroups) { + removeTrackGroup(childTrack); + } + }; + if (args.isTrackGroup) { + removeTrackGroup(args.id); + } else { + state.areas[areaId].tracks.splice(index, 1); } } else { - state.areas[areaId].tracks.push(args.id); - if (args.isTrackGroup) { // Also add all child tracks. - for (const childTrack of state.trackGroups[args.id].tracks) { + const addTrackGroup = (id:string)=> { + // add group + state.areas[areaId].tracks.push(id); + // Also add all child tracks. + for (const childTrack of state.trackGroups[id].tracks) { if (!state.areas[areaId].tracks.includes(childTrack)) { state.areas[areaId].tracks.push(childTrack); } } + // Also add all child track groups. + for (const childTrack of state.trackGroups[id].subgroups) { + if (!state.areas[areaId].tracks.includes(childTrack)) { + addTrackGroup(childTrack); + } + } + }; + if (args.isTrackGroup) { + addTrackGroup(args.id); + } else { + state.areas[areaId].tracks.push(args.id); } } // It's super unexpected that |toggleTrackSelection| does not cause diff --git a/ui/src/frontend/panel_container.ts b/ui/src/frontend/panel_container.ts index dd33b2ba24..d7ea99ebdd 100644 --- a/ui/src/frontend/panel_container.ts +++ b/ui/src/frontend/panel_container.ts @@ -158,24 +158,30 @@ export class PanelContainer implements m.ClassComponent { startY, endY); // Get the track ids from the panels. - const tracks = []; + const tracks = new Set(); for (const panel of panels) { if (panel.attrs.id !== undefined) { - tracks.push(panel.attrs.id); + tracks.add(panel.attrs.id); continue; } if (panel.attrs.trackGroupId !== undefined) { - const trackGroup = globals.state.trackGroups[panel.attrs.trackGroupId]; - // Only select a track group and all child tracks if it is closed. - if (trackGroup.collapsed) { - tracks.push(panel.attrs.trackGroupId); + const addTracks = (trackGroupId: string)=>{ + const trackGroup = + globals.state.trackGroups[trackGroupId]; + // Only select a track group and all child tracks if it is closed. + tracks.add(trackGroupId); for (const track of trackGroup.tracks) { - tracks.push(track); + tracks.add(track); } - } + for (const group of trackGroup.subgroups) { + addTracks(group); + } + }; + addTracks(panel.attrs.trackGroupId); } } - globals.frontendLocalState.selectArea(area.start, area.end, tracks); + globals.frontendLocalState.selectArea( + area.start, area.end, Array.from(tracks.values())); } constructor(vnode: m.CVnode) { diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts index f2dc7155f7..b8b970c356 100644 --- a/ui/src/frontend/track_group_panel.ts +++ b/ui/src/frontend/track_group_panel.ts @@ -50,7 +50,6 @@ interface Attrs { export class TrackGroupPanel extends Panel { private readonly trackGroupId: string; private shellWidth = 0; - private backgroundColor = '#ffffff'; // Updated from CSS later. private summaryTrack: Track|undefined; private dragging = false; private dropping: 'before'|'after'|undefined = undefined; @@ -338,12 +337,7 @@ export class TrackGroupPanel extends Panel { onupdate({dom}: m.CVnodeDOM) { 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 = - getComputedStyle(dom).getPropertyValue('--collapsed-background'); if (this.summaryTrack !== undefined) { this.summaryTrack.onFullRedraw(); } @@ -424,7 +418,8 @@ export class TrackGroupPanel extends Panel { if (!selection || selection.kind !== 'AREA') return; const selectedArea = globals.state.areas[selection.areaId]; const selectedAreaDuration = selectedArea.end - selectedArea.start; - if (selectedArea.tracks.includes(this.trackGroupId)) { + if (selectedArea.tracks.includes(this.trackGroupId) || + selectedArea.tracks.includes(this.summaryTrackState.id)) { ctx.fillStyle = getCssStr('--selection-fill-color'); ctx.fillRect( visibleTimeScale.tpTimeToPx(selectedArea.start) + this.shellWidth, @@ -435,13 +430,6 @@ export class TrackGroupPanel extends Panel { } renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) { - const collapsed = this.trackGroupState.collapsed; - - ctx.fillStyle = this.backgroundColor; - ctx.fillRect(0, 0, size.width, size.height); - - if (!collapsed) return; - // If we have vsync data, render columns under the track group const vsync = getActiveVsyncData(); if (vsync) {