1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-02 01:21:21 +03:00
awx/recordings/test_view_hotkeys.replay
Ben Thomasson 48d801271c
Imports prototype from ansible-network-ui
The ansible-network-ui prototype project builds a standalone Network UI
outside of Tower as its own Django application. The original prototype
code is located here:
https://github.com/benthomasson/ansible-network-ui.

The prototype provides a virtual canvas that supports placing
networking devices onto 2D plane and connecting those devices together
with connections called links.  The point where the link connects
to the network device is called an interface.  The devices, interfaces,
and links may all have their respective names.  This models physical
networking devices is a simple fashion.

The prototype implements a pannable and zoomable 2D canvas in using SVG
elements and AngularJS directives.   This is done by adding event
listeners for mouse and keyboard events to an SVG element that fills the
entire browser window.

Mouse and keyboard events are handled in a processing pipeline where
the processing units are implemented as finite state machines that
provide deterministic behavior to the UI.

The finite state machines are built in a visual way that makes
the states and transitions clearly evident.  The visual tool for
building FSM is located here:
https://github.com/benthomasson/fsm-designer-svg.   This tool
is a fork of this project where the canvas is the same.  The elements
on the page are FSM states and the directional connections are called
transitions.   The bootstrapping of the FSM designer tool and
network-ui happen in parallel.  It was useful to try experiemental
code in FSM designer and then import it into network-ui.

The FSM designer tool provides a YAML description of the design
which can be used to generate skeleton code and check the implementation
against the design for discrepancies.

Events supported:

* Mouse click
* Mouse scroll-wheel
* Keyboard events
* Touch events

Interactions supported:

* Pan canvas by clicking-and-dragging on the background
* Zooming canvas by scrolling mousewheel
* Adding devices and links by using hotkeys
* Selecting devices, interaces, and links by clicking on their icon
* Editing labels on devices, interfaces, and links by double-clicking on
  their icon
* Moving devices around the canvas by clicking-and-dragging on their
  icon

Device types supported:

* router
* switch
* host
* racks

The database schema for the prototype is also developed with a visual
tool that makes the relationships in the snowflake schema for the models
quickly evident.  This tool makes it very easy to build queries across
multiple tables using Django's query builder.

See: https://github.com/benthomasson/db-designer-svg

The client and the server communicate asynchronously over a websocket.
This allows the UI to be very responsive to user interaction since
the full request/response cycle is not needed for every user
interaction.

The server provides persistence of the UI state in the database
using event handlers for events generated in the UI.  The UI
processes mouse and keyboard events, updates the UI, and
generates new types of events that are then sent to the server
to be persisted in the database.

UI elements are tracked by unique ids generated on the client
when an element is first created.  This allows the elements to
be correctly tracked before they are stored in the database.

The history of the UI is stored in the TopologyHistory model
which is useful for tracking which client made which change
and is useful for implementing undo/redo.

Each message is given a unique id per client and has
a known message type.  Message types are pre-populated
in the MessageType model using a database migration.

A History message containing all the change messages for a topology is
sent when the websocket is connected.  This allows for undo/redo work
across sessions.

This prototype provides a server-side test runner for driving
tests in the user interface.  Events are emitted on the server
to drive the UI.  Test code coverage is measured using the
istanbul library which produces instrumented client code.
Code coverage for the server is is measured by the coverage library.

The test code coverage for the Python code is 100%.
2018-03-23 17:00:14 -04:00

295 lines
34 KiB
Plaintext

{"panX": 44.42938840723201, "panY": 53.2877486543979, "scale": 1.1207650273224041, "sender": 3913, "msg_type": "ViewPort", "message_id": 0}
{"sender": 3913, "msg_type": "MouseEvent", "y": 56, "x": 186, "type": "mousemove", "message_id": 18}
{"sender": 3913, "msg_type": "MouseEvent", "y": 57, "x": 186, "type": "mousemove", "message_id": 19}
{"sender": 3913, "msg_type": "MouseEvent", "y": 61, "x": 189, "type": "mouseover", "message_id": 20}
{"sender": 3913, "msg_type": "MouseEvent", "y": 61, "x": 189, "type": "mouseover", "message_id": 21}
{"sender": 3913, "msg_type": "MouseEvent", "y": 61, "x": 189, "type": "mousemove", "message_id": 22}
{"sender": 3913, "msg_type": "MouseEvent", "y": 65, "x": 192, "type": "mousemove", "message_id": 23}
{"sender": 3913, "msg_type": "MouseEvent", "y": 72, "x": 197, "type": "mousemove", "message_id": 24}
{"sender": 3913, "msg_type": "MouseEvent", "y": 80, "x": 205, "type": "mousemove", "message_id": 25}
{"sender": 3913, "msg_type": "MouseEvent", "y": 89, "x": 214, "type": "mousemove", "message_id": 26}
{"sender": 3913, "msg_type": "MouseEvent", "y": 98, "x": 222, "type": "mousemove", "message_id": 27}
{"sender": 3913, "msg_type": "MouseEvent", "y": 106, "x": 228, "type": "mousemove", "message_id": 28}
{"sender": 3913, "msg_type": "MouseEvent", "y": 113, "x": 233, "type": "mousemove", "message_id": 29}
{"sender": 3913, "msg_type": "MouseEvent", "y": 119, "x": 237, "type": "mousemove", "message_id": 30}
{"sender": 3913, "msg_type": "MouseEvent", "y": 125, "x": 239, "type": "mousemove", "message_id": 31}
{"sender": 3913, "msg_type": "MouseEvent", "y": 131, "x": 242, "type": "mousemove", "message_id": 32}
{"sender": 3913, "msg_type": "MouseEvent", "y": 136, "x": 244, "type": "mouseover", "message_id": 33}
{"sender": 3913, "msg_type": "MouseEvent", "y": 136, "x": 244, "type": "mouseover", "message_id": 34}
{"sender": 3913, "msg_type": "MouseEvent", "y": 136, "x": 244, "type": "mousemove", "message_id": 35}
{"sender": 3913, "msg_type": "MouseEvent", "y": 141, "x": 247, "type": "mouseover", "message_id": 36}
{"sender": 3913, "msg_type": "MouseEvent", "y": 141, "x": 247, "type": "mouseover", "message_id": 37}
{"sender": 3913, "msg_type": "MouseEvent", "y": 141, "x": 247, "type": "mousemove", "message_id": 38}
{"sender": 3913, "msg_type": "MouseEvent", "y": 146, "x": 249, "type": "mouseover", "message_id": 39}
{"sender": 3913, "msg_type": "MouseEvent", "y": 146, "x": 249, "type": "mouseover", "message_id": 40}
{"sender": 3913, "msg_type": "MouseEvent", "y": 146, "x": 249, "type": "mousemove", "message_id": 41}
{"sender": 3913, "msg_type": "MouseEvent", "y": 151, "x": 251, "type": "mousemove", "message_id": 42}
{"sender": 3913, "msg_type": "MouseEvent", "y": 155, "x": 253, "type": "mousemove", "message_id": 43}
{"sender": 3913, "msg_type": "MouseEvent", "y": 160, "x": 254, "type": "mouseover", "message_id": 44}
{"sender": 3913, "msg_type": "MouseEvent", "y": 160, "x": 254, "type": "mouseover", "message_id": 45}
{"sender": 3913, "msg_type": "MouseEvent", "y": 160, "x": 254, "type": "mousemove", "message_id": 46}
{"sender": 3913, "msg_type": "MouseEvent", "y": 164, "x": 255, "type": "mousemove", "message_id": 47}
{"sender": 3913, "msg_type": "MouseEvent", "y": 168, "x": 255, "type": "mousemove", "message_id": 48}
{"sender": 3913, "msg_type": "MouseEvent", "y": 171, "x": 255, "type": "mousemove", "message_id": 49}
{"sender": 3913, "msg_type": "MouseEvent", "y": 173, "x": 255, "type": "mousemove", "message_id": 50}
{"sender": 3913, "msg_type": "MouseEvent", "y": 176, "x": 255, "type": "mousemove", "message_id": 51}
{"sender": 3913, "msg_type": "MouseEvent", "y": 177, "x": 255, "type": "mousemove", "message_id": 52}
{"sender": 3913, "msg_type": "MouseEvent", "y": 179, "x": 255, "type": "mousemove", "message_id": 53}
{"sender": 3913, "msg_type": "MouseEvent", "y": 180, "x": 255, "type": "mousemove", "message_id": 54}
{"sender": 3913, "msg_type": "MouseEvent", "y": 181, "x": 254, "type": "mousemove", "message_id": 55}
{"sender": 3913, "msg_type": "MouseEvent", "y": 181, "x": 254, "type": "mousemove", "message_id": 56}
{"sender": 3913, "msg_type": "MouseEvent", "y": 182, "x": 254, "type": "mousemove", "message_id": 57}
{"sender": 3913, "msg_type": "MouseEvent", "y": 182, "x": 254, "type": "mousemove", "message_id": 58}
{"sender": 3913, "msg_type": "MouseEvent", "y": 182, "x": 254, "type": "mousemove", "message_id": 59}
{"sender": 3913, "msg_type": "MouseEvent", "y": 182, "x": 254, "type": "mousedown", "message_id": 60}
{"sender": 3913, "msg_type": "MouseEvent", "y": 182, "x": 254, "type": "mouseup", "message_id": 61}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 62, "altKey": false, "metaKey": false, "key": "d", "ctrlKey": false, "type": "keydown", "keyCode": 68}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 63, "altKey": false, "metaKey": false, "key": "d", "ctrlKey": false, "type": "keydown", "keyCode": 68}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 64, "altKey": false, "metaKey": false, "key": "p", "ctrlKey": false, "type": "keydown", "keyCode": 80}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 65, "altKey": false, "metaKey": false, "key": "p", "ctrlKey": false, "type": "keydown", "keyCode": 80}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 66, "altKey": false, "metaKey": false, "key": "b", "ctrlKey": false, "type": "keydown", "keyCode": 66}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 67, "altKey": false, "metaKey": false, "key": "b", "ctrlKey": false, "type": "keydown", "keyCode": 66}
{"sender": 3913, "msg_type": "MouseEvent", "y": 187, "x": 258, "type": "mouseover", "message_id": 68}
{"sender": 3913, "msg_type": "MouseEvent", "y": 187, "x": 258, "type": "mouseover", "message_id": 69}
{"sender": 3913, "msg_type": "MouseEvent", "y": 187, "x": 258, "type": "mousemove", "message_id": 70}
{"sender": 3913, "msg_type": "MouseEvent", "y": 191, "x": 261, "type": "mousemove", "message_id": 71}
{"sender": 3913, "msg_type": "MouseEvent", "y": 197, "x": 265, "type": "mousemove", "message_id": 72}
{"sender": 3913, "msg_type": "MouseEvent", "y": 229, "x": 296, "type": "mousemove", "message_id": 75}
{"sender": 3913, "msg_type": "MouseEvent", "y": 206, "x": 273, "type": "mousemove", "message_id": 73}
{"sender": 3913, "msg_type": "MouseEvent", "y": 215, "x": 282, "type": "mousemove", "message_id": 74}
{"sender": 3913, "msg_type": "MouseEvent", "y": 240, "x": 306, "type": "mousemove", "message_id": 76}
{"sender": 3913, "msg_type": "MouseEvent", "y": 255, "x": 317, "type": "mousemove", "message_id": 77}
{"sender": 3913, "msg_type": "MouseEvent", "y": 268, "x": 324, "type": "mousemove", "message_id": 78}
{"sender": 3913, "msg_type": "MouseEvent", "y": 277, "x": 327, "type": "mousemove", "message_id": 79}
{"sender": 3913, "msg_type": "MouseEvent", "y": 286, "x": 331, "type": "mousemove", "message_id": 80}
{"sender": 3913, "msg_type": "MouseEvent", "y": 294, "x": 333, "type": "mousemove", "message_id": 81}
{"sender": 3913, "msg_type": "MouseEvent", "y": 306, "x": 336, "type": "mousemove", "message_id": 82}
{"sender": 3913, "msg_type": "MouseEvent", "y": 319, "x": 339, "type": "mousemove", "message_id": 83}
{"sender": 3913, "msg_type": "MouseEvent", "y": 332, "x": 342, "type": "mousemove", "message_id": 84}
{"sender": 3913, "msg_type": "MouseEvent", "y": 343, "x": 345, "type": "mousemove", "message_id": 85}
{"sender": 3913, "msg_type": "MouseEvent", "y": 350, "x": 345, "type": "mouseover", "message_id": 86}
{"sender": 3913, "msg_type": "MouseEvent", "y": 350, "x": 345, "type": "mouseover", "message_id": 87}
{"sender": 3913, "msg_type": "MouseEvent", "y": 358, "x": 346, "type": "mousemove", "message_id": 89}
{"sender": 3913, "msg_type": "MouseEvent", "y": 350, "x": 345, "type": "mousemove", "message_id": 88}
{"sender": 3913, "msg_type": "MouseEvent", "y": 365, "x": 347, "type": "mousemove", "message_id": 90}
{"sender": 3913, "msg_type": "MouseEvent", "y": 371, "x": 347, "type": "mousemove", "message_id": 91}
{"sender": 3913, "msg_type": "MouseEvent", "y": 376, "x": 348, "type": "mousemove", "message_id": 92}
{"sender": 3913, "msg_type": "MouseEvent", "y": 378, "x": 348, "type": "mousemove", "message_id": 93}
{"sender": 3913, "msg_type": "MouseEvent", "y": 380, "x": 348, "type": "mousemove", "message_id": 94}
{"sender": 3913, "msg_type": "MouseEvent", "y": 381, "x": 348, "type": "mousemove", "message_id": 95}
{"sender": 3913, "msg_type": "MouseEvent", "y": 381, "x": 348, "type": "mousemove", "message_id": 96}
{"sender": 3913, "msg_type": "MouseEvent", "y": 381, "x": 348, "type": "mousedown", "message_id": 97}
{"sender": 3913, "msg_type": "MouseEvent", "y": 380, "x": 347, "type": "mousemove", "message_id": 98}
{"sender": 3913, "msg_type": "MouseEvent", "y": 378, "x": 346, "type": "mousemove", "message_id": 99}
{"sender": 3913, "msg_type": "MouseEvent", "y": 373, "x": 344, "type": "mouseover", "message_id": 100}
{"sender": 3913, "msg_type": "MouseEvent", "y": 373, "x": 344, "type": "mouseover", "message_id": 101}
{"sender": 3913, "msg_type": "MouseEvent", "y": 365, "x": 341, "type": "mouseover", "message_id": 103}
{"sender": 3913, "msg_type": "MouseEvent", "y": 373, "x": 344, "type": "mousemove", "message_id": 102}
{"sender": 3913, "msg_type": "MouseEvent", "y": 365, "x": 341, "type": "mouseover", "message_id": 104}
{"sender": 3913, "msg_type": "MouseEvent", "y": 365, "x": 341, "type": "mousemove", "message_id": 105}
{"sender": 3913, "msg_type": "MouseEvent", "y": 354, "x": 337, "type": "mousemove", "message_id": 106}
{"sender": 3913, "msg_type": "MouseEvent", "y": 339, "x": 331, "type": "mousemove", "message_id": 107}
{"sender": 3913, "msg_type": "MouseEvent", "y": 320, "x": 325, "type": "mousemove", "message_id": 108}
{"sender": 3913, "msg_type": "MouseEvent", "y": 299, "x": 318, "type": "mousemove", "message_id": 109}
{"sender": 3913, "msg_type": "MouseEvent", "y": 280, "x": 312, "type": "mousemove", "message_id": 110}
{"sender": 3913, "msg_type": "MouseEvent", "y": 265, "x": 308, "type": "mousemove", "message_id": 111}
{"sender": 3913, "msg_type": "MouseEvent", "y": 255, "x": 306, "type": "mousemove", "message_id": 112}
{"sender": 3913, "msg_type": "MouseEvent", "y": 250, "x": 305, "type": "mouseover", "message_id": 113}
{"sender": 3913, "msg_type": "MouseEvent", "y": 250, "x": 305, "type": "mouseover", "message_id": 114}
{"sender": 3913, "msg_type": "MouseEvent", "y": 246, "x": 304, "type": "mousemove", "message_id": 116}
{"sender": 3913, "msg_type": "MouseEvent", "y": 250, "x": 305, "type": "mousemove", "message_id": 115}
{"sender": 3913, "msg_type": "MouseEvent", "y": 244, "x": 304, "type": "mousemove", "message_id": 117}
{"sender": 3913, "msg_type": "MouseEvent", "y": 243, "x": 303, "type": "mousemove", "message_id": 118}
{"sender": 3913, "msg_type": "MouseEvent", "y": 242, "x": 303, "type": "mousemove", "message_id": 119}
{"sender": 3913, "msg_type": "MouseEvent", "y": 242, "x": 303, "type": "mousemove", "message_id": 120}
{"sender": 3913, "msg_type": "MouseEvent", "y": 242, "x": 303, "type": "mousemove", "message_id": 121}
{"sender": 3913, "msg_type": "MouseEvent", "y": 242, "x": 303, "type": "mouseup", "message_id": 122}
{"sender": 3913, "msg_type": "MouseEvent", "y": 243, "x": 303, "type": "mousemove", "message_id": 123}
{"sender": 3913, "msg_type": "MouseEvent", "y": 244, "x": 303, "type": "mousemove", "message_id": 124}
{"sender": 3913, "msg_type": "MouseEvent", "y": 246, "x": 303, "type": "mousemove", "message_id": 125}
{"sender": 3913, "msg_type": "MouseEvent", "y": 248, "x": 303, "type": "mousemove", "message_id": 126}
{"sender": 3913, "msg_type": "MouseEvent", "y": 251, "x": 303, "type": "mousemove", "message_id": 127}
{"sender": 3913, "msg_type": "MouseEvent", "y": 254, "x": 303, "type": "mousemove", "message_id": 128}
{"sender": 3913, "msg_type": "MouseEvent", "y": 259, "x": 303, "type": "mousemove", "message_id": 129}
{"sender": 3913, "msg_type": "MouseEvent", "y": 265, "x": 302, "type": "mousemove", "message_id": 130}
{"sender": 3913, "msg_type": "MouseEvent", "y": 272, "x": 302, "type": "mousemove", "message_id": 131}
{"sender": 3913, "msg_type": "MouseEvent", "y": 280, "x": 301, "type": "mousemove", "message_id": 132}
{"sender": 3913, "msg_type": "MouseEvent", "y": 287, "x": 301, "type": "mousemove", "message_id": 133}
{"sender": 3913, "msg_type": "MouseEvent", "y": 293, "x": 300, "type": "mousemove", "message_id": 134}
{"sender": 3913, "msg_type": "MouseEvent", "y": 298, "x": 299, "type": "mousemove", "message_id": 135}
{"sender": 3913, "msg_type": "MouseEvent", "y": 302, "x": 299, "type": "mousemove", "message_id": 136}
{"sender": 3913, "msg_type": "MouseEvent", "y": 305, "x": 299, "type": "mousemove", "message_id": 137}
{"sender": 3913, "msg_type": "MouseEvent", "y": 308, "x": 299, "type": "mousemove", "message_id": 138}
{"sender": 3913, "msg_type": "MouseEvent", "y": 310, "x": 299, "type": "mousemove", "message_id": 139}
{"sender": 3913, "msg_type": "MouseEvent", "y": 311, "x": 299, "type": "mousemove", "message_id": 140}
{"sender": 3913, "msg_type": "MouseEvent", "y": 312, "x": 299, "type": "mousemove", "message_id": 141}
{"sender": 3913, "msg_type": "MouseEvent", "y": 312, "x": 299, "type": "mousemove", "message_id": 142}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 143}
{"sender": 3913, "msg_type": "MouseEvent", "y": 313, "x": 299, "type": "mousemove", "message_id": 144}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -3, "deltaY": -9, "delta": -9, "type": "wheel", "message_id": 145}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -9, "delta": -9, "type": "wheel", "message_id": 146}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -8, "delta": -8, "type": "wheel", "message_id": 147}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -7, "delta": -7, "type": "wheel", "message_id": 148}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -6, "delta": -6, "type": "wheel", "message_id": 149}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -4, "delta": -4, "type": "wheel", "message_id": 150}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -1, "deltaY": 0, "delta": 1, "type": "wheel", "message_id": 151}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -2, "deltaY": 0, "delta": 2, "type": "wheel", "message_id": 152}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 11, "delta": 11, "type": "wheel", "message_id": 153}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 14, "delta": 14, "type": "wheel", "message_id": 154}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 20, "delta": 20, "type": "wheel", "message_id": 156}
{"sender": 3913, "msg_type": "MouseEvent", "y": 313, "x": 299, "type": "mousemove", "message_id": 155}
{"sender": 3913, "msg_type": "MouseEvent", "y": 313, "x": 299, "type": "mousemove", "message_id": 157}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 11, "delta": 11, "type": "wheel", "message_id": 158}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 11, "delta": 11, "type": "wheel", "message_id": 159}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 7, "delta": 7, "type": "wheel", "message_id": 160}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 12, "delta": 12, "type": "wheel", "message_id": 161}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 9, "delta": 9, "type": "wheel", "message_id": 162}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 13, "delta": 13, "type": "wheel", "message_id": 163}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 3, "delta": 3, "type": "wheel", "message_id": 164}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 165}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 3, "delta": 3, "type": "wheel", "message_id": 166}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 167}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 168}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 169}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 1, "delta": 1, "type": "wheel", "message_id": 170}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 171}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -4, "delta": -4, "type": "wheel", "message_id": 172}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -4, "delta": -4, "type": "wheel", "message_id": 173}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -4, "delta": -4, "type": "wheel", "message_id": 174}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 175}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 176}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -6, "delta": -6, "type": "wheel", "message_id": 177}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 178}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 179}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 180}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 181}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -4, "delta": -4, "type": "wheel", "message_id": 182}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 183}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 184}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -1, "deltaY": -2, "delta": -2, "type": "wheel", "message_id": 185}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -1, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 186}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -2, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 187}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 3, "delta": 3, "type": "wheel", "message_id": 188}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 189}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 3, "delta": 3, "type": "wheel", "message_id": 190}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 3, "delta": 3, "type": "wheel", "message_id": 191}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 192}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 193}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 194}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 195}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 196}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 197}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 4, "delta": 4, "type": "wheel", "message_id": 198}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 199}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 200}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 3, "delta": 3, "type": "wheel", "message_id": 201}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 1, "delta": 1, "type": "wheel", "message_id": 202}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 1, "delta": 1, "type": "wheel", "message_id": 203}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 1, "delta": 1, "type": "wheel", "message_id": 204}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": 2, "delta": 2, "type": "wheel", "message_id": 205}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 206, "altKey": false, "metaKey": false, "key": "i", "ctrlKey": false, "type": "keydown", "keyCode": 73}
{"sender": 3913, "msg_type": "KeyEvent", "shiftKey": false, "message_id": 207, "altKey": false, "metaKey": false, "key": "i", "ctrlKey": false, "type": "keydown", "keyCode": 73}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 208}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 209}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 210}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -9, "delta": -9, "type": "wheel", "message_id": 211}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -6, "delta": -6, "type": "wheel", "message_id": 212}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -9, "delta": -9, "type": "wheel", "message_id": 213}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -8, "delta": -8, "type": "wheel", "message_id": 214}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -8, "delta": -8, "type": "wheel", "message_id": 215}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -5, "delta": -5, "type": "wheel", "message_id": 216}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -11, "delta": -11, "type": "wheel", "message_id": 217}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -7, "delta": -7, "type": "wheel", "message_id": 218}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -7, "delta": -7, "type": "wheel", "message_id": 219}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -6, "delta": -6, "type": "wheel", "message_id": 220}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 221}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -4, "delta": -4, "type": "wheel", "message_id": 222}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 223}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 224}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": 0, "deltaY": -3, "delta": -3, "type": "wheel", "message_id": 225}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -1, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 226}
{"originalEvent": {"metaKey": false}, "sender": 3913, "msg_type": "MouseWheelEvent", "deltaX": -1, "deltaY": -1, "delta": -1, "type": "wheel", "message_id": 227}
{"sender": 3913, "msg_type": "MouseEvent", "y": 310, "x": 299, "type": "mousemove", "message_id": 229}
{"sender": 3913, "msg_type": "MouseEvent", "y": 311, "x": 299, "type": "mousemove", "message_id": 228}
{"sender": 3913, "msg_type": "MouseEvent", "y": 306, "x": 299, "type": "mousemove", "message_id": 230}
{"sender": 3913, "msg_type": "MouseEvent", "y": 303, "x": 299, "type": "mousemove", "message_id": 231}
{"sender": 3913, "msg_type": "MouseEvent", "y": 299, "x": 299, "type": "mousemove", "message_id": 232}
{"sender": 3913, "msg_type": "MouseEvent", "y": 292, "x": 299, "type": "mousemove", "message_id": 233}
{"sender": 3913, "msg_type": "MouseEvent", "y": 286, "x": 298, "type": "mousemove", "message_id": 234}
{"sender": 3913, "msg_type": "MouseEvent", "y": 279, "x": 298, "type": "mousemove", "message_id": 235}
{"sender": 3913, "msg_type": "MouseEvent", "y": 269, "x": 297, "type": "mousemove", "message_id": 236}
{"sender": 3913, "msg_type": "MouseEvent", "y": 261, "x": 296, "type": "mousemove", "message_id": 237}
{"sender": 3913, "msg_type": "MouseEvent", "y": 250, "x": 294, "type": "mouseover", "message_id": 238}
{"sender": 3913, "msg_type": "MouseEvent", "y": 250, "x": 294, "type": "mouseover", "message_id": 239}
{"sender": 3913, "msg_type": "MouseEvent", "y": 250, "x": 294, "type": "mousemove", "message_id": 240}
{"sender": 3913, "msg_type": "MouseEvent", "y": 238, "x": 292, "type": "mousemove", "message_id": 241}
{"sender": 3913, "msg_type": "MouseEvent", "y": 226, "x": 290, "type": "mousemove", "message_id": 242}
{"sender": 3913, "msg_type": "MouseEvent", "y": 218, "x": 289, "type": "mouseover", "message_id": 243}
{"sender": 3913, "msg_type": "MouseEvent", "y": 218, "x": 289, "type": "mouseover", "message_id": 244}
{"sender": 3913, "msg_type": "MouseEvent", "y": 218, "x": 289, "type": "mousemove", "message_id": 245}
{"sender": 3913, "msg_type": "MouseEvent", "y": 206, "x": 286, "type": "mouseover", "message_id": 246}
{"sender": 3913, "msg_type": "MouseEvent", "y": 206, "x": 286, "type": "mouseover", "message_id": 247}
{"sender": 3913, "msg_type": "MouseEvent", "y": 206, "x": 286, "type": "mousemove", "message_id": 248}
{"sender": 3913, "msg_type": "MouseEvent", "y": 195, "x": 282, "type": "mousemove", "message_id": 249}
{"sender": 3913, "msg_type": "MouseEvent", "y": 185, "x": 279, "type": "mousemove", "message_id": 250}
{"sender": 3913, "msg_type": "MouseEvent", "y": 176, "x": 276, "type": "mousemove", "message_id": 251}
{"sender": 3913, "msg_type": "MouseEvent", "y": 170, "x": 274, "type": "mousemove", "message_id": 252}
{"sender": 3913, "msg_type": "MouseEvent", "y": 162, "x": 269, "type": "mousemove", "message_id": 253}
{"sender": 3913, "msg_type": "MouseEvent", "y": 153, "x": 265, "type": "mousemove", "message_id": 254}
{"sender": 3913, "msg_type": "MouseEvent", "y": 144, "x": 259, "type": "mousemove", "message_id": 255}
{"sender": 3913, "msg_type": "MouseEvent", "y": 135, "x": 253, "type": "mousemove", "message_id": 256}
{"sender": 3913, "msg_type": "MouseEvent", "y": 130, "x": 248, "type": "mousemove", "message_id": 257}
{"sender": 3913, "msg_type": "MouseEvent", "y": 123, "x": 244, "type": "mousemove", "message_id": 258}
{"sender": 3913, "msg_type": "MouseEvent", "y": 118, "x": 240, "type": "mousemove", "message_id": 259}
{"sender": 3913, "msg_type": "MouseEvent", "y": 113, "x": 237, "type": "mousemove", "message_id": 260}
{"sender": 3913, "msg_type": "MouseEvent", "y": 109, "x": 235, "type": "mousemove", "message_id": 261}
{"sender": 3913, "msg_type": "MouseEvent", "y": 106, "x": 234, "type": "mouseover", "message_id": 263}
{"sender": 3913, "msg_type": "MouseEvent", "y": 106, "x": 234, "type": "mouseover", "message_id": 262}
{"sender": 3913, "msg_type": "MouseEvent", "y": 106, "x": 234, "type": "mousemove", "message_id": 264}
{"sender": 3913, "msg_type": "MouseEvent", "y": 102, "x": 231, "type": "mouseover", "message_id": 265}
{"sender": 3913, "msg_type": "MouseEvent", "y": 102, "x": 231, "type": "mouseover", "message_id": 266}
{"sender": 3913, "msg_type": "MouseEvent", "y": 102, "x": 231, "type": "mousemove", "message_id": 267}
{"sender": 3913, "msg_type": "MouseEvent", "y": 98, "x": 228, "type": "mousemove", "message_id": 268}
{"sender": 3913, "msg_type": "MouseEvent", "y": 94, "x": 224, "type": "mousemove", "message_id": 269}
{"sender": 3913, "msg_type": "MouseEvent", "y": 89, "x": 220, "type": "mousemove", "message_id": 270}
{"sender": 3913, "msg_type": "MouseEvent", "y": 86, "x": 217, "type": "mousemove", "message_id": 271}
{"sender": 3913, "msg_type": "MouseEvent", "y": 82, "x": 214, "type": "mousemove", "message_id": 272}
{"sender": 3913, "msg_type": "MouseEvent", "y": 79, "x": 211, "type": "mousemove", "message_id": 273}
{"sender": 3913, "msg_type": "MouseEvent", "y": 77, "x": 209, "type": "mousemove", "message_id": 274}
{"sender": 3913, "msg_type": "MouseEvent", "y": 75, "x": 208, "type": "mouseover", "message_id": 275}
{"sender": 3913, "msg_type": "MouseEvent", "y": 75, "x": 208, "type": "mouseover", "message_id": 276}
{"sender": 3913, "msg_type": "MouseEvent", "y": 75, "x": 208, "type": "mousemove", "message_id": 277}
{"sender": 3913, "msg_type": "MouseEvent", "y": 75, "x": 207, "type": "mousemove", "message_id": 278}
{"sender": 3913, "msg_type": "MouseEvent", "y": 75, "x": 207, "type": "mousemove", "message_id": 279}
{"sender": 3913, "msg_type": "MouseEvent", "y": 74, "x": 206, "type": "mousemove", "message_id": 280}
{"sender": 3913, "msg_type": "MouseEvent", "y": 73, "x": 205, "type": "mousemove", "message_id": 281}
{"sender": 3913, "msg_type": "MouseEvent", "y": 72, "x": 203, "type": "mouseover", "message_id": 282}
{"sender": 3913, "msg_type": "MouseEvent", "y": 72, "x": 203, "type": "mouseover", "message_id": 283}
{"sender": 3913, "msg_type": "MouseEvent", "y": 72, "x": 203, "type": "mousemove", "message_id": 284}
{"sender": 3913, "msg_type": "MouseEvent", "y": 70, "x": 202, "type": "mouseover", "message_id": 285}
{"sender": 3913, "msg_type": "MouseEvent", "y": 70, "x": 202, "type": "mouseover", "message_id": 286}
{"sender": 3913, "msg_type": "MouseEvent", "y": 70, "x": 202, "type": "mousemove", "message_id": 287}
{"sender": 3913, "msg_type": "MouseEvent", "y": 69, "x": 200, "type": "mouseover", "message_id": 288}
{"sender": 3913, "msg_type": "MouseEvent", "y": 69, "x": 200, "type": "mouseover", "message_id": 289}
{"sender": 3913, "msg_type": "MouseEvent", "y": 69, "x": 200, "type": "mousemove", "message_id": 290}
{"sender": 3913, "msg_type": "MouseEvent", "y": 68, "x": 199, "type": "mouseover", "message_id": 291}
{"sender": 3913, "msg_type": "MouseEvent", "y": 68, "x": 199, "type": "mouseover", "message_id": 292}
{"sender": 3913, "msg_type": "MouseEvent", "y": 68, "x": 199, "type": "mousemove", "message_id": 293}
{"sender": 3913, "msg_type": "MouseEvent", "y": 67, "x": 199, "type": "mousemove", "message_id": 294}
{"sender": 3913, "msg_type": "MouseEvent", "y": 65, "x": 198, "type": "mousemove", "message_id": 295}
{"sender": 3913, "msg_type": "MouseEvent", "y": 64, "x": 198, "type": "mousemove", "message_id": 296}
{"sender": 3913, "msg_type": "MouseEvent", "y": 63, "x": 197, "type": "mousemove", "message_id": 297}
{"sender": 3913, "msg_type": "MouseEvent", "y": 61, "x": 196, "type": "mousemove", "message_id": 298}
{"sender": 3913, "msg_type": "MouseEvent", "y": 59, "x": 195, "type": "mousemove", "message_id": 299}
{"sender": 3913, "msg_type": "MouseEvent", "y": 58, "x": 194, "type": "mousemove", "message_id": 300}
{"sender": 3913, "msg_type": "MouseEvent", "y": 57, "x": 193, "type": "mousemove", "message_id": 301}
{"sender": 3913, "msg_type": "MouseEvent", "y": 56, "x": 193, "type": "mousemove", "message_id": 304}
{"sender": 3913, "msg_type": "MouseEvent", "y": 57, "x": 193, "type": "mousemove", "message_id": 302}
{"sender": 3913, "msg_type": "MouseEvent", "y": 56, "x": 193, "type": "mousemove", "message_id": 303}
{"sender": 3913, "msg_type": "MouseEvent", "y": 56, "x": 193, "type": "mousemove", "message_id": 306}
{"sender": 3913, "msg_type": "MouseEvent", "y": 56, "x": 193, "type": "mousemove", "message_id": 305}
{"sender": 3913, "msg_type": "MouseEvent", "y": 56, "x": 193, "type": "mousemove", "message_id": 307}
{"sender": 3913, "msg_type": "MouseEvent", "y": 55, "x": 193, "type": "mousemove", "message_id": 308}
{"sender": 3913, "msg_type": "MouseEvent", "y": 55, "x": 193, "type": "mousedown", "message_id": 309}
{"sender": 3913, "msg_type": "MouseEvent", "y": 55, "x": 193, "type": "mouseup", "message_id": 310}