Skip to content

Commit

Permalink
Merge "ui: Create a directory for viewer-page related code" into main
Browse files Browse the repository at this point in the history
  • Loading branch information
stevegolton authored and Gerrit Code Review committed Dec 16, 2024
2 parents 076d398 + b8708b8 commit 9f760e2
Show file tree
Hide file tree
Showing 21 changed files with 252 additions and 221 deletions.
File renamed without changes.
10 changes: 5 additions & 5 deletions ui/src/frontend/help_modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@
// limitations under the License.

import m from 'mithril';
import {assertExists} from '../base/logging';
import {AppImpl} from '../core/app_impl';
import {HotkeyGlyphs} from '../widgets/hotkey_glyphs';
import {showModal} from '../widgets/modal';
import {Spinner} from '../widgets/spinner';
import {
KeyboardLayoutMap,
nativeKeyboardLayoutMap,
NotSupportedError,
} from './keyboard_layout_map';
import {KeyMapping} from './pan_and_zoom_handler';
import {HotkeyGlyphs} from '../widgets/hotkey_glyphs';
import {assertExists} from '../base/logging';
import {AppImpl} from '../core/app_impl';
} from '../base/keyboard_layout_map';
import {KeyMapping} from './viewer_page/pan_and_zoom_handler';

export function toggleHelp() {
AppImpl.instance.analytics.logEvent('User Actions', 'Show help');
Expand Down
2 changes: 1 addition & 1 deletion ui/src/frontend/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {postMessageHandler} from './post_message_handler';
import {Route, Router} from '../core/router';
import {CheckHttpRpcConnection} from './rpc_http_dialog';
import {maybeOpenTraceFromRoute} from './trace_url_handler';
import {ViewerPage} from './viewer_page';
import {ViewerPage} from './viewer_page/viewer_page';
import {HttpRpcEngine} from '../trace_processor/http_rpc_engine';
import {showModal} from '../widgets/modal';
import {IdleDetector} from './idle_detector';
Expand Down
97 changes: 97 additions & 0 deletions ui/src/frontend/notes_editor_tab.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
// Copyright (C) 2024 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import m from 'mithril';
import {assertUnreachable} from '../base/logging';
import {Icons} from '../base/semantic_icons';
import {Timestamp} from '../components/widgets/timestamp';
import {TraceImpl} from '../core/trace_impl';
import {DetailsPanel} from '../public/details_panel';
import {Note, SpanNote} from '../public/note';
import {Selection} from '../public/selection';
import {Button} from '../widgets/button';

function getStartTimestamp(note: Note | SpanNote) {
const noteType = note.noteType;
switch (noteType) {
case 'SPAN':
return note.start;
case 'DEFAULT':
return note.timestamp;
default:
assertUnreachable(noteType);
}
}

export class NotesEditorTab implements DetailsPanel {
constructor(private trace: TraceImpl) {}

render(selection: Selection) {
if (selection.kind !== 'note') {
return undefined;
}

const id = selection.id;

const note = this.trace.notes.getNote(id);
if (note === undefined) {
return m('.', `No Note with id ${id}`);
}
const startTime = getStartTimestamp(note);
return m(
'.notes-editor-panel',
{
key: id, // Every note shoul get its own brand new DOM.
},
m(
'.notes-editor-panel-heading-bar',
m(
'.notes-editor-panel-heading',
`Annotation at `,
m(Timestamp, {ts: startTime}),
),
m('input[type=text]', {
oncreate: (v: m.VnodeDOM) => {
// NOTE: due to bad design decisions elsewhere this component is
// rendered every time the mouse moves on the canvas. We cannot set
// `value: note.text` as an input as that will clobber the input
// value as we move the mouse.
const inputElement = v.dom as HTMLInputElement;
inputElement.value = note.text;
},
onchange: (e: InputEvent) => {
const newText = (e.target as HTMLInputElement).value;
this.trace.notes.changeNote(id, {text: newText});
},
}),
m(
'span.color-change',
`Change color: `,
m('input[type=color]', {
value: note.color,
onchange: (e: Event) => {
const newColor = (e.target as HTMLInputElement).value;
this.trace.notes.changeNote(id, {color: newColor});
},
}),
),
m(Button, {
label: 'Remove',
icon: Icons.Delete,
onclick: () => this.trace.notes.removeNote(id),
}),
),
);
}
}
2 changes: 1 addition & 1 deletion ui/src/frontend/ui_main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import {DisposableStack} from '../base/disposable_stack';
import {Spinner} from '../widgets/spinner';
import {TraceImpl} from '../core/trace_impl';
import {AppImpl} from '../core/app_impl';
import {NotesEditorTab} from './notes_panel';
import {NotesEditorTab} from './notes_editor_tab';
import {NotesListEditor} from './notes_list_editor';
import {getTimeSpanOfSelectionOrVisibleWindow} from '../public/utils';
import {DurationPrecision, TimestampFormat} from '../public/timeline';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import {ArrowHeadStyle, drawBezierArrow} from '../base/canvas/bezier_arrow';
import {Size2D, Point2D, HorizontalBounds} from '../base/geom';
import {ALL_CATEGORIES, getFlowCategories} from './flow_events_panel';
import {Flow} from '../core/flow_types';
import {ArrowHeadStyle, drawBezierArrow} from '../../base/canvas/bezier_arrow';
import {HorizontalBounds, Point2D, Size2D} from '../../base/geom';
import {TimeScale} from '../../base/time_scale';
import {Flow} from '../../core/flow_types';
import {TraceImpl} from '../../core/trace_impl';
import {TrackNode} from '../../public/workspace';
import {ALL_CATEGORIES, getFlowCategories} from '../flow_events_panel';
import {RenderedPanelInfo} from './panel_container';
import {TimeScale} from '../base/time_scale';
import {TrackNode} from '../public/workspace';
import {TraceImpl} from '../core/trace_impl';

const TRACK_GROUP_CONNECTION_OFFSET = 5;
const TRIANGLE_SIZE = 5;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import {assertTrue} from '../base/logging';
import {duration, time, Time, TimeSpan} from '../base/time';
import {assertTrue} from '../../base/logging';
import {duration, time, Time, TimeSpan} from '../../base/time';

const micros = 1000n;
const millis = 1000n * micros;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import {Time, TimeSpan} from '../base/time';
import {Time, TimeSpan} from '../../base/time';
import {getPattern, generateTicks, TickType} from './gridline_helper';

test('gridline helper to have sensible step sizes', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,19 @@
// limitations under the License.

import m from 'mithril';
import {currentTargetOffset} from '../base/dom_utils';
import {Icons} from '../base/semantic_icons';
import {randomColor} from '../components/colorizer';
import {SpanNote, Note} from '../public/note';
import {raf} from '../core/raf_scheduler';
import {Button, ButtonBar} from '../widgets/button';
import {TRACK_SHELL_WIDTH} from './css_constants';
import {getMaxMajorTicks, generateTicks, TickType} from './gridline_helper';
import {Size2D} from '../base/geom';
import {canvasClip} from '../../base/canvas_utils';
import {currentTargetOffset} from '../../base/dom_utils';
import {Size2D} from '../../base/geom';
import {assertUnreachable} from '../../base/logging';
import {TimeScale} from '../../base/time_scale';
import {randomColor} from '../../components/colorizer';
import {raf} from '../../core/raf_scheduler';
import {TraceImpl} from '../../core/trace_impl';
import {Note, SpanNote} from '../../public/note';
import {Button, ButtonBar} from '../../widgets/button';
import {TRACK_SHELL_WIDTH} from '../css_constants';
import {generateTicks, getMaxMajorTicks, TickType} from './gridline_helper';
import {Panel} from './panel_container';
import {Timestamp} from '../components/widgets/timestamp';
import {assertUnreachable} from '../base/logging';
import {DetailsPanel} from '../public/details_panel';
import {TimeScale} from '../base/time_scale';
import {canvasClip} from '../base/canvas_utils';
import {Selection} from '../public/selection';
import {TraceImpl} from '../core/trace_impl';

const FLAG_WIDTH = 16;
const AREA_TRIANGLE_WIDTH = 10;
Expand Down Expand Up @@ -369,65 +365,3 @@ export class NotesPanel implements Panel {
}
}
}

export class NotesEditorTab implements DetailsPanel {
constructor(private trace: TraceImpl) {}

render(selection: Selection) {
if (selection.kind !== 'note') {
return undefined;
}

const id = selection.id;

const note = this.trace.notes.getNote(id);
if (note === undefined) {
return m('.', `No Note with id ${id}`);
}
const startTime = getStartTimestamp(note);
return m(
'.notes-editor-panel',
{
key: id, // Every note shoul get its own brand new DOM.
},
m(
'.notes-editor-panel-heading-bar',
m(
'.notes-editor-panel-heading',
`Annotation at `,
m(Timestamp, {ts: startTime}),
),
m('input[type=text]', {
oncreate: (v: m.VnodeDOM) => {
// NOTE: due to bad design decisions elsewhere this component is
// rendered every time the mouse moves on the canvas. We cannot set
// `value: note.text` as an input as that will clobber the input
// value as we move the mouse.
const inputElement = v.dom as HTMLInputElement;
inputElement.value = note.text;
},
onchange: (e: InputEvent) => {
const newText = (e.target as HTMLInputElement).value;
this.trace.notes.changeNote(id, {text: newText});
},
}),
m(
'span.color-change',
`Change color: `,
m('input[type=color]', {
value: note.color,
onchange: (e: Event) => {
const newColor = (e.target as HTMLInputElement).value;
this.trace.notes.changeNote(id, {color: newColor});
},
}),
),
m(Button, {
label: 'Remove',
icon: Icons.Delete,
onclick: () => this.trace.notes.removeNote(id),
}),
),
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,34 @@
// limitations under the License.

import m from 'mithril';
import {Duration, Time, TimeSpan, duration, time} from '../base/time';
import {colorForCpu} from '../components/colorizer';
import {timestampFormat} from '../core/timestamp_format';
import {DragGestureHandler} from '../../base/drag_gesture_handler';
import {Size2D} from '../../base/geom';
import {HighPrecisionTimeSpan} from '../../base/high_precision_time_span';
import {assertUnreachable} from '../../base/logging';
import {Duration, duration, Time, time, TimeSpan} from '../../base/time';
import {TimeScale} from '../../base/time_scale';
import {getOrCreate} from '../../base/utils';
import {colorForCpu} from '../../components/colorizer';
import {raf} from '../../core/raf_scheduler';
import {timestampFormat} from '../../core/timestamp_format';
import {TraceImpl} from '../../core/trace_impl';
import {TimestampFormat} from '../../public/timeline';
import {LONG, NUM} from '../../trace_processor/query_result';
import {
OVERVIEW_TIMELINE_NON_VISIBLE_COLOR,
TRACK_SHELL_WIDTH,
} from './css_constants';
import {BorderDragStrategy} from './drag/border_drag_strategy';
import {DragStrategy} from './drag/drag_strategy';
import {InnerDragStrategy} from './drag/inner_drag_strategy';
import {OuterDragStrategy} from './drag/outer_drag_strategy';
import {DragGestureHandler} from '../base/drag_gesture_handler';
} from '../css_constants';
import {BorderDragStrategy} from '../drag/border_drag_strategy';
import {DragStrategy} from '../drag/drag_strategy';
import {InnerDragStrategy} from '../drag/inner_drag_strategy';
import {OuterDragStrategy} from '../drag/outer_drag_strategy';
import {
generateTicks,
getMaxMajorTicks,
MIN_PX_PER_STEP,
generateTicks,
TickType,
} from './gridline_helper';
import {Size2D} from '../base/geom';
import {Panel} from './panel_container';
import {TimeScale} from '../base/time_scale';
import {HighPrecisionTimeSpan} from '../base/high_precision_time_span';
import {TraceImpl} from '../core/trace_impl';
import {LONG, NUM} from '../trace_processor/query_result';
import {raf} from '../core/raf_scheduler';
import {getOrCreate} from '../base/utils';
import {assertUnreachable} from '../base/logging';
import {TimestampFormat} from '../public/timeline';

const tracesData = new WeakMap<TraceImpl, OverviewDataLoader>();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import {DisposableStack} from '../base/disposable_stack';
import {currentTargetOffset, elementIsEditable} from '../base/dom_utils';
import {raf} from '../core/raf_scheduler';
import {Animation} from './animation';
import {DragGestureHandler} from '../base/drag_gesture_handler';
import {DisposableStack} from '../../base/disposable_stack';
import {currentTargetOffset, elementIsEditable} from '../../base/dom_utils';
import {DragGestureHandler} from '../../base/drag_gesture_handler';
import {raf} from '../../core/raf_scheduler';
import {Animation} from '../animation';

// When first starting to pan or zoom, move at least this many units.
const INITIAL_PAN_STEP_PX = 50;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,24 @@
// limitations under the License.

import m from 'mithril';
import {findRef, toHTMLElement} from '../base/dom_utils';
import {assertExists, assertFalse} from '../base/logging';
import {canvasClip} from '../../base/canvas_utils';
import {DisposableStack} from '../../base/disposable_stack';
import {findRef, toHTMLElement} from '../../base/dom_utils';
import {Bounds2D, Size2D, VerticalBounds} from '../../base/geom';
import {assertExists, assertFalse} from '../../base/logging';
import {SimpleResizeObserver} from '../../base/resize_observer';
import {TimeScale} from '../../base/time_scale';
import {VirtualCanvas} from '../../base/virtual_canvas';
import {
PerfStats,
PerfStatsContainer,
runningStatStr,
} from '../core/perf_stats';
import {raf} from '../core/raf_scheduler';
import {SimpleResizeObserver} from '../base/resize_observer';
import {canvasClip} from '../base/canvas_utils';
import {SELECTION_STROKE_COLOR, TRACK_SHELL_WIDTH} from './css_constants';
import {Bounds2D, Size2D, VerticalBounds} from '../base/geom';
import {VirtualCanvas} from '../base/virtual_canvas';
import {DisposableStack} from '../base/disposable_stack';
import {TimeScale} from '../base/time_scale';
import {TrackNode} from '../public/workspace';
import {HTMLAttrs} from '../widgets/common';
import {TraceImpl, TraceImplAttrs} from '../core/trace_impl';
} from '../../core/perf_stats';
import {raf} from '../../core/raf_scheduler';
import {TraceImpl, TraceImplAttrs} from '../../core/trace_impl';
import {TrackNode} from '../../public/workspace';
import {HTMLAttrs} from '../../widgets/common';
import {SELECTION_STROKE_COLOR, TRACK_SHELL_WIDTH} from '../css_constants';

const CANVAS_OVERDRAW_PX = 300;
const CANVAS_TOLERANCE_PX = 100;
Expand Down
Loading

0 comments on commit 9f760e2

Please sign in to comment.