From 667b326f3049a03b5678bb9d1615673498195659 Mon Sep 17 00:00:00 2001 From: Steve Golton Date: Mon, 18 Sep 2023 13:01:50 +0100 Subject: [PATCH] [ui] Tidy up bottom tabs. - Remove `renderTabCanvas()` method in `BottomTab` base class. - Remove any references to `panel.ts`. - Remove empty `FlamegraphDetailsPanelAttrs` interface. Change-Id: I464d2fd13b33d521ec5fce39cf59762c80e9aa2c --- ui/src/frontend/bottom_tab.ts | 10 ++-------- ui/src/frontend/chrome_slice_details_tab.ts | 5 ----- ui/src/frontend/details_panel.ts | 5 ++--- ui/src/frontend/flamegraph_panel.ts | 19 ++++++++----------- ui/src/frontend/generic_slice_details_tab.ts | 4 ---- ui/src/frontend/notes_panel.ts | 2 -- ui/src/frontend/query_result_tab.ts | 2 -- ui/src/frontend/sql_table/tab.ts | 2 -- ui/src/frontend/thread_state_tab.ts | 2 -- .../event_latency_details_panel.ts | 4 ---- .../scroll_details_panel.ts | 4 ---- .../scroll_jank_v3_details_panel.ts | 4 ---- ui/src/tracks/debug/details_tab.ts | 4 ---- 13 files changed, 12 insertions(+), 55 deletions(-) diff --git a/ui/src/frontend/bottom_tab.ts b/ui/src/frontend/bottom_tab.ts index 71535508a9..845d371e01 100644 --- a/ui/src/frontend/bottom_tab.ts +++ b/ui/src/frontend/bottom_tab.ts @@ -23,7 +23,6 @@ import {Registry} from '../common/registry'; import {raf} from '../core/raf_scheduler'; import {globals} from './globals'; -import {PanelSize, PanelVNode} from './panel'; export interface NewBottomTabArgs { engine: EngineProxy; @@ -89,7 +88,7 @@ export abstract class BottomTabBase { abstract getTitle(): string; // Generate a mithril node for this component. - abstract createPanelVnode(): PanelVNode; + abstract renderPanel(): m.Children; // API for the tab to notify the TabList that it's still preparing the data. // If true, adding a new tab will be delayed for a short while (~50ms) to @@ -114,18 +113,13 @@ export abstract class BottomTab extends BottomTabBase { super(args); } - // These methods are direct counterparts to renderCanvas and view with - // slightly changes names to prevent cases when `BottomTab` will - // be accidentally used a mithril component. - abstract renderTabCanvas(ctx: CanvasRenderingContext2D, size: PanelSize): - void; abstract viewTab(): void|m.Children; close(): void { closeTab(this.uuid); } - createPanelVnode(): m.Vnode { + renderPanel(): m.Children { return m( BottomTabAdapter, {key: this.uuid, panel: this} as BottomTabAdapterAttrs); diff --git a/ui/src/frontend/chrome_slice_details_tab.ts b/ui/src/frontend/chrome_slice_details_tab.ts index 571fc70013..b572db2a79 100644 --- a/ui/src/frontend/chrome_slice_details_tab.ts +++ b/ui/src/frontend/chrome_slice_details_tab.ts @@ -35,7 +35,6 @@ import { NewBottomTabArgs, } from './bottom_tab'; import {FlowPoint, globals} from './globals'; -import {PanelSize} from './panel'; import {runQueryInNewTab} from './query_result_tab'; import {renderArguments} from './slice_args'; import {renderDetails} from './slice_details'; @@ -210,10 +209,6 @@ export class ChromeSliceDetailsTab extends .then((sliceDetails) => this.sliceDetails = sliceDetails); } - renderTabCanvas(_ctx: CanvasRenderingContext2D, _size: PanelSize): void { - // No-op - } - getTitle(): string { return `Current Selection`; } diff --git a/ui/src/frontend/details_panel.ts b/ui/src/frontend/details_panel.ts index 0b291ba861..a7e168d341 100644 --- a/ui/src/frontend/details_panel.ts +++ b/ui/src/frontend/details_panel.ts @@ -37,7 +37,6 @@ import {FtracePanel} from './ftrace_panel'; import {globals} from './globals'; import {LogPanel} from './logs_panel'; import {NotesEditorTab} from './notes_panel'; -import {AnyAttrsVnode} from './panel_container'; import {PivotTable} from './pivot_table'; import {SliceDetailsPanel} from './slice_details_panel'; import {ThreadStateTab} from './thread_state_tab'; @@ -259,7 +258,7 @@ export class DetailsPanel implements m.ClassComponent { interface DetailsPanel { key: string; name: string; - vnode: AnyAttrsVnode; + vnode: m.Children; } const detailsPanels: DetailsPanel[] = []; @@ -269,7 +268,7 @@ export class DetailsPanel implements m.ClassComponent { detailsPanels.push({ key: tab.tag ?? tab.uuid, name: tab.getTitle(), - vnode: tab.createPanelVnode(), + vnode: tab.renderPanel(), }); } } diff --git a/ui/src/frontend/flamegraph_panel.ts b/ui/src/frontend/flamegraph_panel.ts index 5dabc8fa53..8206474f23 100644 --- a/ui/src/frontend/flamegraph_panel.ts +++ b/ui/src/frontend/flamegraph_panel.ts @@ -38,14 +38,11 @@ import {DurationWidget} from '../widgets/duration'; import {Flamegraph, NodeRendering} from './flamegraph'; import {globals} from './globals'; import {Modal, ModalDefinition} from './modal'; -import {PanelSize} from './panel'; import {debounce} from './rate_limiters'; import {Router} from './router'; import {getCurrentTrace} from './sidebar'; import {convertTraceToPprofAndDownload} from './trace_converter'; -interface FlamegraphDetailsPanelAttrs {} - const HEADER_HEIGHT = 30; function toSelectedCallsite(c: CallsiteInfo|undefined): string { @@ -64,8 +61,7 @@ const RENDER_OBJ_COUNT: NodeRendering = { totalSize: 'Subtree objects', }; -export class FlamegraphDetailsPanel implements - m.ClassComponent { +export class FlamegraphDetailsPanel implements m.ClassComponent { private profileType?: ProfileType = undefined; private ts = Time.ZERO; private pids: number[] = []; @@ -255,7 +251,7 @@ export class FlamegraphDetailsPanel implements this.nodeRendering(), flamegraphData, data.expandedCallsite); } - oncreate({dom}: m.CVnodeDOM) { + oncreate({dom}: m.CVnodeDOM) { this.canvas = FlamegraphDetailsPanel.findCanvasElement(dom); // TODO(stevegolton): If we truely want to be standalone, then we shouldn't // rely on someone else calling the rafScheduler when the window is resized, @@ -263,11 +259,11 @@ export class FlamegraphDetailsPanel implements raf.addRedrawCallback(this.rafRedrawCallback); } - onupdate({dom}: m.CVnodeDOM) { + onupdate({dom}: m.CVnodeDOM) { this.canvas = FlamegraphDetailsPanel.findCanvasElement(dom); } - onremove(_vnode: m.CVnodeDOM) { + onremove(_vnode: m.CVnodeDOM) { raf.removeRedrawCallback(this.rafRedrawCallback); } @@ -291,13 +287,14 @@ export class FlamegraphDetailsPanel implements ctx.save(); ctx.scale(devicePixelRatio, devicePixelRatio); const {offsetWidth: width, offsetHeight: height} = canvas; - this.renderLocalCanvas(ctx, {width, height}); + this.renderLocalCanvas(ctx, width, height); ctx.restore(); } } }; - private renderLocalCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) { + private renderLocalCanvas( + ctx: CanvasRenderingContext2D, width: number, height: number) { this.changeFlamegraphData(); const current = globals.state.currentFlamegraphState; if (current === null) return; @@ -306,7 +303,7 @@ export class FlamegraphDetailsPanel implements current.viewingOption === ALLOC_SPACE_MEMORY_ALLOCATED_KEY ? 'B' : ''; - this.flamegraph.draw(ctx, size.width, size.height, 0, 0, unit); + this.flamegraph.draw(ctx, width, height, 0, 0, unit); } private onMouseClick({x, y}: {x: number, y: number}): boolean { diff --git a/ui/src/frontend/generic_slice_details_tab.ts b/ui/src/frontend/generic_slice_details_tab.ts index 46813d2b89..240b9827fe 100644 --- a/ui/src/frontend/generic_slice_details_tab.ts +++ b/ui/src/frontend/generic_slice_details_tab.ts @@ -124,10 +124,6 @@ export class GenericSliceDetailsTab extends isLoading() { return this.data === undefined; } - - renderTabCanvas() { - return; - } } bottomTabRegistry.register(GenericSliceDetailsTab); diff --git a/ui/src/frontend/notes_panel.ts b/ui/src/frontend/notes_panel.ts index 9ddaef0ae3..ea32ac16e2 100644 --- a/ui/src/frontend/notes_panel.ts +++ b/ui/src/frontend/notes_panel.ts @@ -316,8 +316,6 @@ export class NotesEditorTab extends BottomTab { super(args); } - renderTabCanvas() {} - getTitle() { return 'Current Selection'; } diff --git a/ui/src/frontend/query_result_tab.ts b/ui/src/frontend/query_result_tab.ts index 77de9127db..1a7cb37c84 100644 --- a/ui/src/frontend/query_result_tab.ts +++ b/ui/src/frontend/query_result_tab.ts @@ -130,8 +130,6 @@ export class QueryResultTab extends BottomTab { return this.queryResponse === undefined; } - renderTabCanvas() {} - async createViewForDebugTrack(uuid: string): Promise { const viewId = uuidToViewName(uuid); // Assuming that the query results come from a SELECT query, try creating a diff --git a/ui/src/frontend/sql_table/tab.ts b/ui/src/frontend/sql_table/tab.ts index 449b8e426b..1629d421b8 100644 --- a/ui/src/frontend/sql_table/tab.ts +++ b/ui/src/frontend/sql_table/tab.ts @@ -107,8 +107,6 @@ export class SqlTableTab extends BottomTab { })); } - renderTabCanvas() {} - getTitle(): string { const rowCount = this.state.getTotalRowCount(); const rows = rowCount === undefined ? '' : ` (${rowCount})`; diff --git a/ui/src/frontend/thread_state_tab.ts b/ui/src/frontend/thread_state_tab.ts index 1a5f542ec1..09bc3e7511 100644 --- a/ui/src/frontend/thread_state_tab.ts +++ b/ui/src/frontend/thread_state_tab.ts @@ -370,8 +370,6 @@ export class ThreadStateTab extends BottomTab { isLoading() { return this.state === undefined || this.relatedStates === undefined; } - - renderTabCanvas(): void {} } bottomTabRegistry.register(ThreadStateTab); diff --git a/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts b/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts index e51a6972a8..da726723db 100644 --- a/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts +++ b/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts @@ -185,10 +185,6 @@ export class EventLatencySliceDetailsPanel extends getTitle(): string { return `Current Selection`; } - - renderTabCanvas() { - return; - } } bottomTabRegistry.register(EventLatencySliceDetailsPanel); diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts b/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts index 6e3154ffe4..fdec90008e 100644 --- a/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts +++ b/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts @@ -357,10 +357,6 @@ export class ScrollDetailsPanel extends isLoading() { return !this.loaded; } - - renderTabCanvas() { - return; - } } bottomTabRegistry.register(ScrollDetailsPanel); diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts b/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts index 9eb2a94b52..299efdb01b 100644 --- a/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts +++ b/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts @@ -331,10 +331,6 @@ export class ScrollJankV3DetailsPanel extends isLoading() { return !this.loaded; } - - renderTabCanvas() { - return; - } } bottomTabRegistry.register(ScrollJankV3DetailsPanel); diff --git a/ui/src/tracks/debug/details_tab.ts b/ui/src/tracks/debug/details_tab.ts index d391f20ea7..8b89ec9f6d 100644 --- a/ui/src/tracks/debug/details_tab.ts +++ b/ui/src/tracks/debug/details_tab.ts @@ -258,10 +258,6 @@ export class DebugSliceDetailsTab extends isLoading() { return this.data === undefined; } - - renderTabCanvas() { - return; - } } bottomTabRegistry.register(DebugSliceDetailsTab);