Add history tab and enhance visualization features to devtools

[chacha912]

What this PR does / why we need it?

devtools-v2.mp4

Enhancements in Devtools
Introduce new features in this PR, enhancing the functionality of Devtools:

• Addition of History Tab
  • Introducing the History tab, where you can now view the history of document changes(TransactionEvent).
    • local-change: Highlighted in yellow , remote-change: Highlighted in blue.
    • presence-change: Identified with cursor icon , document-change: Identified with document icon.
  • Time-travel within the History tab.
    • Slide the event slider to explore the document at specific time points.
    • Click on event icon to access detailed event and operation information associated with the change.
    • Convenient navigation is also possible using the arrows on the right side of the tab.
      
• Enhanced Tree Graph Display
  • Mouseover tree nodes to access attributes, index, path, and pos information.
    
• UI Improvements
  • Resize history, document, and presence tabs by simply dragging.

Any background context you want to provide?

as-is	to-be

Does this PR introduce a user-facing change?:

Devtools are not available by default. If you want to use Devtools, you can do so as follows:

const doc = new yorkie.Document('docKey', {
  enableDevtools: true, // Modify the condition according to your situation
});

The event type has been modified as follows:

• The base type has been augmented with a 'source' in addition to 'type' and 'value'.
• The StatusChangedEvent has been added.
• The LocalChangeEvent and RemoteChangeEvent include a new field called rawChange.
• The event.rawChange value for local-change and remote-change events, and the event.value.snapshot for snapshot events, are set only when enableDevtools is configured as true.
• You can subscribe to all events occurring in the document by using document.subscribe('all', (event)=>{}).
  • The events received from document.subscribe('all', (event)=>{}) are of type TransactionEvent, which is an Array<DocEvent>. TransactionEvent represents a collection of events occurring within a single transaction(e.g. doc.update()).

What are the relevant tickets?

Fixes #

Checklist

• Added relevant tests or not required
• Didn't break anything

[codecov]

Codecov Report

Attention: Patch coverage is 50.72993% with 135 lines in your changes are missing coverage. Please review.

Project coverage is 80.47%. Comparing base (a51f356) to head (e766f0f).

Files	Patch %	Lines
src/document/document.ts	51.29%	61 Missing and 14 partials ⚠️
src/devtools/index.ts	10.52%	16 Missing and 1 partial ⚠️
src/document/crdt/tree.ts	0.00%	13 Missing ⚠️
src/api/converter.ts	85.00%	6 Missing and 3 partials ⚠️
src/document/change/change.ts	0.00%	5 Missing ⚠️
src/document/json/array.ts	0.00%	2 Missing and 1 partial ⚠️
src/document/json/counter.ts	0.00%	3 Missing ⚠️
src/document/json/text.ts	0.00%	3 Missing ⚠️
src/document/json/tree.ts	0.00%	3 Missing ⚠️
src/document/operation/tree_edit_operation.ts	0.00%	3 Missing ⚠️
... and 1 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #760      +/-   ##
==========================================
- Coverage   81.92%   80.47%   -1.45%     
==========================================
  Files          59       59              
  Lines        4338     4431      +93     
  Branches      852      889      +37     
==========================================
+ Hits         3554     3566      +12     
- Misses        532      604      +72     
- Partials      252      261       +9     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hackerwins]

Thank you for mixing DocEvent and DevtoolsEvent to harmonize. The logic has become much simpler.

I have more comments.

A. Lazy generating the operation bytes

Currently, there has been an addition of logic to directly generate the byte stream of the operation when executing changes. This logic seems to be executed even when Devtools is not enabled, potentially impacting performance.

How about optimizing the logic by lazily generating the byte stream and only building it when Devtools is enabled?

B. Move accumulating logic to Devtools

Currently, accumulating events and operations in Documents is not ideal. Would it be possible to consider managing this accumulation in Devtools instead? This could potentially help streamline the process and improve overall efficiency.

[chacha912]

@hackerwins Thank you for your review. I've made the following modifications:

A. Lazy generating the operation bytes:

Modified to build byte data from events only when devtools are enabled.

B. Move accumulating logic to Devtools:

Revised to accumulate docEvents in Devtools instead of the Document.

[hackerwins]

There were a lot of complex and difficult issues in this PR. Thank you for organizing them so neatly. 🎉