ui: Create a directory for viewer-page related code

The 'viewer' page has become large and complex enough that it deserves its own directory, as it currently has a lot of code scattered throughout src/frontend. This CL moves all this code into a new dir at src/frontend/viewer_page for better code organization. This CL is a no-op, it only moves files around. Change-Id: Ie420286d9265b3997239764288a81026708a7a8b
google · Dec 16, 2024 · b8708b8 · b8708b8
1 parent 43595ee
commit b8708b8
Show file tree

Hide file tree

Showing 21 changed files with 252 additions and 221 deletions.
diff --git a/ui/src/frontend/keyboard_layout_map.ts → ui/src/base/keyboard_layout_map.ts b/ui/src/frontend/keyboard_layout_map.ts → ui/src/base/keyboard_layout_map.ts
diff --git a/ui/src/frontend/help_modal.ts b/ui/src/frontend/help_modal.ts
@@ -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');

diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts
@@ -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';

diff --git a/ui/src/frontend/notes_editor_tab.ts b/ui/src/frontend/notes_editor_tab.ts
@@ -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),
+        }),
+      ),
+    );
+  }
+}
diff --git a/ui/src/frontend/ui_main.ts b/ui/src/frontend/ui_main.ts
@@ -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';

diff --git a/ui/src/frontend/flow_events_renderer.ts → ...ntend/viewer_page/flow_events_renderer.ts b/ui/src/frontend/flow_events_renderer.ts → ...ntend/viewer_page/flow_events_renderer.ts
@@ -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;

diff --git a/ui/src/frontend/gridline_helper.ts → ...c/frontend/viewer_page/gridline_helper.ts b/ui/src/frontend/gridline_helper.ts → ...c/frontend/viewer_page/gridline_helper.ts
@@ -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;

diff --git a/ui/src/frontend/gridline_helper_unittest.ts → ...d/viewer_page/gridline_helper_unittest.ts b/ui/src/frontend/gridline_helper_unittest.ts → ...d/viewer_page/gridline_helper_unittest.ts
@@ -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', () => {

diff --git a/ui/src/frontend/notes_panel.ts → ui/src/frontend/viewer_page/notes_panel.ts b/ui/src/frontend/notes_panel.ts → ui/src/frontend/viewer_page/notes_panel.ts
@@ -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;
@@ -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),
-        }),
-      ),
-    );
-  }
-}
diff --git a/ui/src/frontend/overview_timeline_panel.ts → ...nd/viewer_page/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts → ...nd/viewer_page/overview_timeline_panel.ts
@@ -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>();
 

diff --git a/ui/src/frontend/pan_and_zoom_handler.ts → ...ntend/viewer_page/pan_and_zoom_handler.ts b/ui/src/frontend/pan_and_zoom_handler.ts → ...ntend/viewer_page/pan_and_zoom_handler.ts
@@ -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;

diff --git a/ui/src/frontend/panel_container.ts → ...c/frontend/viewer_page/panel_container.ts b/ui/src/frontend/panel_container.ts → ...c/frontend/viewer_page/panel_container.ts
@@ -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;