Merge pull request #287166 from microsoft/rebornix/disgusted-jaguar

Update instructions/documentation for notebook and interactive window components
This commit is contained in:
Peng Lyu
2026-01-12 13:45:33 -08:00
committed by GitHub
parent a1248f5307
commit 87912ef73b
8 changed files with 2589 additions and 0 deletions

View File

@@ -0,0 +1,51 @@
---
applyTo: '**/interactive/**'
description: Architecture documentation for VS Code interactive window component
---
# Interactive Window
The interactive window component enables extensions to offer REPL like experience to its users. VS Code provides the user interface and extensions provide the execution environment, code completions, execution results rendering and so on.
The interactive window consists of notebook editor at the top and regular monaco editor at the bottom of the viewport. Extensions can extend the interactive window by leveraging the notebook editor API and text editor/document APIs:
* Extensions register notebook controllers for the notebook document in the interactive window through `vscode.notebooks.createNotebookController`. The notebook document has a special notebook view type `interactive`, which is contributed by the core instead of extensions. The registered notebook controller is responsible for execution.
* Extensions register auto complete provider for the bottom text editor through `vscode.languages.registerCompletionItemProvider`. The resource scheme for the text editor is `interactive-input` and the language used in the editor is determined by the notebook controller contributed by extensions.
Users can type in code in the text editor and after users pressing `Shift+Enter`, we will insert a new code cell into the notebook document with the content from the text editor. Then we will request execution for the newly inserted cell. The notebook controller will handle the execution just like it's in a normal notebook editor.
## Interactive Window Registration
Registering a new editor type in the workbench consists of two steps:
* Register an editor input factory which is responsible for resolving resources with given `glob` patterns. Here we register an `InteractiveEditorInput` for all resources with `vscode-interactive` scheme.
* Register an editor pane factory for the given editor input type. Here we register `InteractiveEditor` for our own editor input `InteractiveEditorInput`.
The workbench editor service is not aware of how models are resolved in `EditorInput`, neither how `EditorPane`s are rendered. It only cares about the common states and events on `EditorInput` or `EditorPane`, i.e., display name, capabilities (editable), content change, dirty state change. It's `EditorInput`/`EditorPane`'s responsibility to provide the right info and updates to the editor service. One major difference between Interactive Editor and other editor panes is Interactive Window is never dirty so users never see a dot on the editor title bar.
![Editor Registration](./resources/interactive/interactive.editor.drawio.svg)
## Interactive Window Editor Model Resolution
The `Interactive.open` command will manually create an `InteractiveEditorInput` specific for the Interactive Window and resolving that Input will go through the following workflow:
The `INotebookEditorModelResolverService` is used to resolve the notebook model. The `InteractiveEditorInput` wraps a `NotebookEditorInput` for the notebook document and manages a separate text model for the input editor.
When the notebook model is resolved, the `INotebookEditorModelResolverService` uses the working copy infrastructure to create a `IResolvedNotebookEditorModel`. The content is passed through a `NotebookSerializer` from the `INotebookService` to construct a `NotebookTextModel`.
![Model Resolution](./resources/interactive/interactive.model.resolution.drawio.svg)
The `FileSystem` provider that is registered for `vscode-interactive` schema will always return an empty buffer for any read, and will drop all write requests as nothing is stored on disk for Interactive Window resources. The `NotebookSerializer` that is registered for the `interactive` viewtype knows to return an empty notebook data model when it deserializes an empty buffer when the model is being resolved.
Restoring the interactive window happens through the editor serializer (`InteractiveEditorSerializer`), where the notebook data is stored, and can be used to repopulate the `InteractiveEditorInput` without needing to go through the full editor model resolution flow.
## UI/EH Editor/Document Syncing
`EditorInput` is responsible for resolving models for the given resources but in Interactive Window it's much simpler as we are not resolving models ourselves but delegating to Notebook and TextEditor. `InteractiveEditorInput` does the coordination job:
- It wraps a `NotebookEditorInput` via `_notebookEditorInput` for the notebook document (history cells)
- It manages a separate text model via `ITextModelService` for the input editor at the bottom
- The `IInteractiveDocumentService` coordinates between these two parts
- The `IInteractiveHistoryService` manages command history for the input editor
![Architecture](./resources/interactive/interactive.eh.drawio.svg)

View File

@@ -0,0 +1,109 @@
---
applyTo: '**/notebook/**'
description: Architecture documentation for VS Code notebook and interactive window components
---
# Notebook Architecture
This document describes the internal architecture of VS Code's notebook implementation.
## Model resolution
Notebook model resolution is handled by `NotebookService`. It resolves notebook models from the file system or other sources. The notebook model is a tree of cells, where each cell has a type (code or markdown) and a list of outputs.
## Viewport rendering (virtualization)
The notebook viewport is virtualized to improve performance. Only visible cells are rendered, and cells outside the viewport are recycled. The viewport rendering is handled by `NotebookCellList` which extends `WorkbenchList<CellViewModel>`.
![Viewport Rendering](./resources/notebook/viewport-rendering.drawio.svg)
The rendering has the following steps:
1. **Render Viewport** - Layout/render only the cells that are in the visible viewport
2. **Render Template** - Each cell type has a template (code cell, markdown cell) that is instantiated via `CodeCellRenderer` or `MarkupCellRenderer`
3. **Render Element** - The cell content is rendered into the template
4. **Get Dynamic Height** - Cell height is computed dynamically based on content (editor lines, outputs, etc.)
5. **Cell Parts Lifecycle** - Each cell has lifecycle parts that manage focus, selection, and other state
### Cell resize above viewport
When a cell above the viewport is resized (e.g., output grows), the viewport needs to be updated to maintain scroll position. This is handled by tracking scroll anchors.
![Cell Resize Above Viewport](./resources/notebook/cell-resize-above-viewport.drawio.svg)
## Cell Rendering
The notebook editor renders cells through a contribution system. Cell parts are organized into two categories via `CellPartsCollection`:
- **CellContentPart** - Non-floating elements rendered inside a cell synchronously to avoid flickering
- `prepareRenderCell()` - Prepare model (no DOM operations)
- `renderCell()` / `didRenderCell()` - Update DOM for the cell
- `unrenderCell()` - Cleanup when cell leaves viewport
- `updateInternalLayoutNow()` - Update layout per cell layout changes
- `updateState()` - Update per cell state change
- `updateForExecutionState()` - Update per execution state change
- **CellOverlayPart** - Floating elements rendered on top, may be deferred to next animation frame
Cell parts are located in `view/cellParts/` and contribute to different aspects:
- **Editor** - The Monaco editor for code cells
- **Outputs** - Rendered outputs from code execution
- **Toolbar** - Cell toolbar with actions
- **Status Bar** - Execution status, language info
- **Decorations** - Fold regions, diagnostics, etc.
- **Context Keys** - Cell-specific context key management
- **Drag and Drop** - Cell reordering via `CellDragAndDropController`
## Focus Tracking
Focus in the notebook editor is complex because there are multiple focusable elements:
1. The notebook list itself (`NotebookCellList`)
2. Individual cell containers
3. Monaco editors within cells
4. Output elements (webviews via `BackLayerWebView`)
The `NotebookEditorWidget` tracks focus state and provides APIs to manage focus across these components. Context keys like `NOTEBOOK_EDITOR_FOCUSED`, `NOTEBOOK_OUTPUT_FOCUSED`, and `NOTEBOOK_OUTPUT_INPUT_FOCUSED` are used to track focus state.
## Optimizations
### Output virtualization
Large outputs are virtualized similar to cells. Only visible portions of outputs are rendered.
### Cell DOM recycling
Cell DOM elements are pooled and recycled to reduce DOM operations. When scrolling, cells that move out of the viewport have their templates returned to the pool. Editor instances are managed via `NotebookCellEditorPool`.
### Webview reuse
Output webviews are reused across cells when possible to reduce the overhead of creating new webview contexts. The `BackLayerWebView` manages the webview lifecycle.
---
# Find in Notebook Outputs
The notebook find feature supports searching in both text models and rendered outputs. The find functionality is implemented via `FindModel` and `CellFindMatchModel` classes.
## Hybrid Find
For rendered outputs (HTML, images with alt text, etc.), the find uses a hybrid approach:
1. **Text model search** - Searches cell source code using standard text search via `FindMatch`
2. **DOM search in webview** - Uses `window.find()` to search rendered output content via `CellWebviewFindMatch`
![Hybrid Find](./resources/notebook/hybrid-find.drawio.svg)
The hybrid find works by:
1. First finding matches in text models (cell inputs) - stored in `contentMatches`
2. Then finding matches in rendered outputs via webview - stored in `webviewMatches`
3. Mixing both match types into a unified result set via `CellFindMatchModel`
4. Navigating between matches reveals the appropriate editor or output
### Implementation details
- Uses `window.find()` for DOM searching in webview
- Uses `document.execCommand('hiliteColor')` to highlight matches
- Serializes `document.getSelection()` to get match positions
- Creates ranges for current match highlighting

View File

@@ -0,0 +1,331 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1041px" height="701px" viewBox="-0.5 -0.5 1041 701" content="&lt;mxfile&gt;&lt;diagram id=&quot;SckAI8QHEKwFKhKEKjYm&quot; name=&quot;Page-1&quot;&gt;7VtNc6M4EP01Po4LEAJ8TJzMTA6zldps1c4eGVBsVTDygJw48+tXAokviQTbskMS+xLUQjJ673WrWyYTMF9tv2XhevmDxCiZOFa8nYCriePYwHfZH255Li0+9ErDIsOxuKk23OE/SBgtYd3gGOWtGykhCcXrtjEiaYoi2rKFWUae2rfdk6T9retwgRTDXRQmqvVfHNOlsNqWVXd8R3ixFF8dQNGxCuXNwpAvw5g8NUzgegLmGSG0vFpt5yjh4ElcynFfe3qrB8tQSocM8JxyxGOYbMTixIPRZ7najGzSGPEB9gRcPi0xRXfrMOK9T4xfZlvSVSK673GSzElCsmIsiK0IIbaqy5xm5AE1eqAHbZ/NcSkeAGUUbXtXYVfYMFEhskI0e2a3iAGeQFPIyXZF+6lBjiWNywYxvmQsFIpYVHPXoLELgVsPhrtAaO0GYUpSjtE9SWkDO6v46FCtenog1ADdj6rfhtX1VVgrITdRBa4BVP0jClOgGmaRiC3em2E8a2MMbY10Aw3G9iw4HOPglBg71lhA9uFAkF14OMYzBeO/CEW/CHlg1usYU7Zix2LbyAJRBX22QNqGuA2UDA8a3BO8SFkzYrAhZr/kcGG2hV2IjhWOY/41Wk7b8YqTJki03RdINEBVFZClPzgaqqAu5hgIOdL3GlzNWe5y5ul1nnxPwxM4Fk+2wtMNRy+MKH5s0vXZWRqyg9vaHdwES6A38t2h7BEzhA7abPIHRKOl3Hk6oJbEyuTcGVFW1d3wdbmqr6EEmqAEKpT8w3yiKND+RjlJ2DI+Mze25UxhO665vrS0kgWoIchAsgDUHegFIt5RLQEcv4OstprQ1WhGqgkwU3BEbCe/E00BTQM4tMX0p8CYX//Hr6cOFM2rbaPv6lk2UvZYP+UMvFEOg7JZDytacpxBSnKyySKxQiDPRsKMJy2tqMxX/yJxGUrCYjttzn4QBequfViQGWdFB9yu0nU1nWNplF4V04fALL3lQKW/L6E7GqHDNxP6Mc/URlRWq0rXFdZapZtIZkB/flklNQrun64EAFAJR6csqYGrkHRzZucFdk5aSAO1HtAX0tZNut6cjz0GprHH8yb1ULxk6DZM1YpNZWc46hnK8Z/wVzEVx25NcEqLJ4eXE3jF59pQkgvUdyD+lKcdmtJaV1mbyLqAepReMjPUcT42NRq/OSE57oDKA6XxBf9luIYjDvNllaFp8mV5vVtlWDWaw8ZRGorg8mrC3GBMF+ikbXBeLb7hluu44c1u25u9rhLK5YhRtRjUibonbn5nohIDZaJCVdWyhwltQOa/g9B6NOO9IpmidYsyzJ6chxLTOmpqJhiVZqBakQR7qgbOlKm6O7hB3ahZcpV5yXNZdmnkaHakpybKBmFrEmH2mWpOXj0Te4SaCjdTK0bDAudyzg8GvucHU/9t0R/wDk0jcEZJmOc46guXUxc6zZBpTy3gjChoukOPpk4TNasY2U3Ndo2ZAWhPBGbHi5hqJVR7aF22nusizq/jtmnRvWOkO2IwknsPeMdITYmaIdOcD47E30AnIQXdCDrU37qOq0xk0N/U15h2o7H6lWEaQL9ZOb1cNrHGEYPyWAQRzKYS4ENjMJ8L7qUKxl343LhNhLadZVyLrJxxX8lB9Xx/55yAa+VruMIJf8bviOXRPKy3zwyrcqqUpw2qklzkDtZsTLmDOy7pKgfYeyvXtbpTHTF/gGq6P3G8hAriWirzfm+I7PhSbu0X7AbbWW/rTna1oEWCwLMQlMkUpJyTPU45bXnT+0lJOqVJry8dqyxUNaFJXmYafdsGchdooCoZEoFs50Nua0Hfq267RoaZ+8pEBuOCWlfg4gS/cPl3eaTfFdmpfVhhD2jKD/tI5Qfcrfw4u/ArLtzdkfd24SNu7WqpssjIZl268E3pw98Ky9mH9/XhQOPDuhfJTfiwrF/OPmzEhz1T27AykTkf9tRfbNnMc8ZNRpKWI0vb2ZX3dGVPtx3r5LiHK7Nm/a/MpQzqfwgH1/8D&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<rect x="0" y="0" width="1040" height="700" rx="105" ry="105" fill="#d0cee2" stroke="#56517e" pointer-events="all"/>
<rect x="610" y="330" width="220" height="340" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="630" y="370" width="180" height="198" rx="10.8" ry="10.8" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="630" y="610" width="180" height="45" rx="9" ry="9" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="640" y="380" width="150" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 395px; margin-left: 641px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Notebook Editor Widget
</div>
</div>
</div>
</foreignObject>
<text x="715" y="399" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Notebook Editor Widget
</text>
</switch>
</g>
<rect x="640" y="620" width="130" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 635px; margin-left: 641px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Code Editor Widget
</div>
</div>
</div>
</foreignObject>
<text x="705" y="639" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Code Editor Widget
</text>
</switch>
</g>
<rect x="610" y="330" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 345px; margin-left: 611px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Interactive Editor
</div>
</div>
</div>
</foreignObject>
<text x="670" y="349" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Interactive Editor
</text>
</switch>
</g>
<rect x="30" y="400" width="170" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 37.5 400 M 37.5 400 C 72 398.16 101.73 398.56 192.5 400 M 37.5 400 C 71.53 399.87 104.78 401.13 192.5 400 M 192.5 400 C 197.95 399.4 200.51 401.45 200 407.5 M 192.5 400 C 199.02 399.15 197.87 401.07 200 407.5 M 200 407.5 C 201.18 418.13 201.11 430.17 200 442.5 M 200 407.5 C 199.68 417.41 200.6 427.53 200 442.5 M 200 442.5 C 198.84 445.57 198.67 448.08 192.5 450 M 200 442.5 C 198.03 445.49 197.05 448.92 192.5 450 M 192.5 450 C 151.75 449.5 109.73 449.16 37.5 450 M 192.5 450 C 154.45 449.4 117.67 449.75 37.5 450 M 37.5 450 C 32.87 450.43 29.18 446.95 30 442.5 M 37.5 450 C 33.61 451.49 31.11 447.29 30 442.5 M 30 442.5 C 29.86 431.1 28.71 420.16 30 407.5 M 30 442.5 C 29.78 435.05 29.2 427.69 30 407.5 M 30 407.5 C 29.3 403.51 33.61 401.76 37.5 400 M 30 407.5 C 28.57 404.48 31.38 401.62 37.5 400" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 425px; margin-left: 31px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookService
</div>
</div>
</div>
</foreignObject>
<text x="115" y="429" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookService
</text>
</switch>
</g>
<rect x="42.5" y="607.5" width="185" height="55" rx="8.25" ry="8.25" fill="none" stroke="none" pointer-events="all"/>
<path d="M 50.75 607.5 M 50.75 607.5 C 85.82 610.15 120.05 606.94 219.25 607.5 M 50.75 607.5 C 112.36 605.81 171.94 605.5 219.25 607.5 M 219.25 607.5 C 226.61 607.96 225.77 608.45 227.5 615.75 M 219.25 607.5 C 226.66 607.78 227.3 612.28 227.5 615.75 M 227.5 615.75 C 228.15 629.27 227.2 641.66 227.5 654.25 M 227.5 615.75 C 228.44 625.2 226.85 634.95 227.5 654.25 M 227.5 654.25 C 227.54 658.63 222.89 661.14 219.25 662.5 M 227.5 654.25 C 226.75 657.87 226.17 663.04 219.25 662.5 M 219.25 662.5 C 167.72 661.51 116.77 661.21 50.75 662.5 M 219.25 662.5 C 174.2 663.15 126.77 662.21 50.75 662.5 M 50.75 662.5 C 45.85 662.35 41.33 660.26 42.5 654.25 M 50.75 662.5 C 45.42 663.96 43.33 659.73 42.5 654.25 M 42.5 654.25 C 41.1 642.2 43.91 632.69 42.5 615.75 M 42.5 654.25 C 43.01 639.46 42.87 626.85 42.5 615.75 M 42.5 615.75 C 42.67 611.25 43.26 606.65 50.75 607.5 M 42.5 615.75 C 44.43 608.08 46.16 609.06 50.75 607.5" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 183px; height: 1px; padding-top: 635px; margin-left: 43px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
TextModelResolverService
</div>
</div>
</div>
</foreignObject>
<text x="135" y="639" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
TextModelResolverService
</text>
</switch>
</g>
<rect x="267.5" y="330" width="240" height="340" fill="none" stroke="#000000" pointer-events="all"/>
<path d="M 287.5 425 L 206.37 425" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 201.12 425 L 208.12 421.5 L 206.37 425 L 208.12 428.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="287.5" y="370" width="200" height="220" rx="12" ry="12" fill="none" stroke="#000000" pointer-events="all"/>
<path d="M 287.5 635 L 233.87 635" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 228.62 635 L 235.62 631.5 L 233.87 635 L 235.62 638.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="287.5" y="610" width="200" height="50" rx="10" ry="10" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="297.5" y="380" width="150" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 395px; margin-left: 299px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookTextModel
</div>
</div>
</div>
</foreignObject>
<text x="373" y="399" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookTextModel
</text>
</switch>
</g>
<rect x="297.5" y="620" width="130" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 635px; margin-left: 299px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ITextModel
</div>
</div>
</div>
</foreignObject>
<text x="363" y="639" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ITextModel
</text>
</switch>
</g>
<rect x="267.5" y="330" width="150" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 345px; margin-left: 268px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Interactive Editor Input
</div>
</div>
</div>
</foreignObject>
<text x="342" y="349" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Interactive Editor In...
</text>
</switch>
</g>
<rect x="610" y="300" width="70" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 310px; margin-left: 645px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
EditorPane
</div>
</div>
</div>
</foreignObject>
<text x="645" y="314" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
EditorPane
</text>
</switch>
</g>
<rect x="267.5" y="300" width="70" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 310px; margin-left: 302px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
EditorInput
</div>
</div>
</div>
</foreignObject>
<text x="302" y="314" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
EditorInput
</text>
</switch>
</g>
<path d="M 487.5 425 L 630 419.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<path d="M 487.5 640 L 630 637" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="267.5" y="20" width="222.5" height="60" rx="3.6" ry="3.6" fill="none" stroke="#000000" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 221px; height: 1px; padding-top: 50px; margin-left: 269px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Editor Resolver Service
</div>
</div>
</div>
</foreignObject>
<text x="379" y="54" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Editor Resolver Service
</text>
</switch>
</g>
<rect x="618.75" y="20" width="222.5" height="60" rx="3.6" ry="3.6" fill="none" stroke="#000000" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 221px; height: 1px; padding-top: 50px; margin-left: 620px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
EditorPane Registry
</div>
</div>
</div>
</foreignObject>
<text x="730" y="54" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
EditorPane Registry
</text>
</switch>
</g>
<path d="M 720 300 L 719.34 88.29" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 719.32 83.04 L 722.85 90.03 L 719.34 88.29 L 715.85 90.05 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="664" y="170" width="130" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 180px; margin-left: 729px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Registry Editor Pane
</div>
</div>
</div>
</foreignObject>
<text x="729" y="184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Registry Editor Pane
</text>
</switch>
</g>
<path d="M 330 220 L 720 220" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 329.49 300 L 330 220" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 297.5 300 L 297.54 86.91" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 297.54 81.66 L 301.04 88.66 L 297.54 86.91 L 294.04 88.66 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="247.5" y="170" width="90" height="10" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 175px; margin-left: 292px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 6px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
<font style="font-size: 12px">
registerEditor
</font>
</div>
</div>
</div>
</foreignObject>
<text x="292" y="177" fill="#000000" font-family="Helvetica" font-size="6px" text-anchor="middle">
registerEditor
</text>
</switch>
</g>
<path d="M 830 400 L 873.63 400" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 878.88 400 L 871.88 403.5 L 873.63 400 L 871.88 396.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="880" y="390" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 400px; margin-left: 935px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
input: EditorInput
</div>
</div>
</div>
</foreignObject>
<text x="935" y="404" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
input: EditorInput
</text>
</switch>
</g>
<path d="M 830 450 L 873.63 450" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 878.88 450 L 871.88 453.5 L 873.63 450 L 871.88 446.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="880" y="440" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 450px; margin-left: 940px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
group: IEditorGroup
</div>
</div>
</div>
</foreignObject>
<text x="940" y="454" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
group: IEditorGroup
</text>
</switch>
</g>
<path d="M 830 500 L 873.63 500" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 878.88 500 L 871.88 503.5 L 873.63 500 L 871.88 496.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="880" y="490" width="150" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 500px; margin-left: 955px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
getControl: IEditorControl
</div>
</div>
</div>
</foreignObject>
<text x="955" y="504" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
getControl: IEditorControl
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 30 KiB

View File

@@ -0,0 +1,244 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="882px" height="752px" viewBox="-0.5 -0.5 882 752" content="&lt;mxfile&gt;&lt;diagram id=&quot;SckAI8QHEKwFKhKEKjYm&quot; name=&quot;Page-1&quot;&gt;7Vpdc5s4FP01ftwMEgjMY5J62zxsZ2e9nbaPLCiGCUYuyDHeX18BEiAkHNtBqadxXmJdfYDOuffo6toz+35dfsyDTfwXiXA6g1ZUzuwPMwiB6/rsX2XZNxYfcMMqTyI+qDMsk/8xN1rcuk0iXEgDKSEpTTayMSRZhkMq2YI8Jzt52CNJ5adughVWDMswSFXr1ySiMbcCy+o6PuFkFfNHzxHvWAdiMDcUcRCRXc9kL2b2fU4IbT6ty3ucVuAJXJp5f470ti+W44weMwHOmxnPQbrlm+MvRvditznZZhGuJoCZfbeLE4qXmyCseneMX2aL6Trl3Y9Jmt6TlOT1XDuyQozZru4KmpMn3OtBLgIeW+OOvwDOKS5HdwFabJhTYbLGNN+zIWWLfDOF+5OAe9eRM59zW9zjxRMDA+4Qq3bpDjP2gcM2AuHLCOIsuq3cjrUyklWbjoIibiHtwTeyc2jhSHJJFYreXpFmq8KW4zSgybPsyLrt8yf8TRL2Ji3Sri0j7c2RvERBtnmI+ay+472wkDtYhwb5ClNlnZqMdtdH8WNr+HFTWvkqqd+oI8r9sSWi44+ilp1bNgA4m7LrZJ9W1f9FWU3+RAoq1mNv0izZDFDcgDk4lemWo4L7Rj+EuClIk1XGmiFzC8zsd1W4JEyQbnnHOomi6jHa8OwC2OKb68WhVf8dcj0lNEfjEAE9qT3fdDW+aU8QhY4hlr88XNkVIev9MnbdU04p67RTSvAyApxycJmEFM5VTKGjA9WZAFXP4NkvXDsPefrm/jKMfRljG2owtjQYt0naazA2mV8pGMNDCvCmICONOGhBniID8xWMPxOK/yPkiVkXUULZji9XrTl3wDGr3p41CANbZQhAQ/ot8oIeRf/iOn+60qOnB3kqPb4pdoDCzkMFXhDWN4UrSacc1+ZiSL3ICJlb4vw5YQi96mQpnjANY3HMDEBtiBXFDnhBKZRnIYkToDl5gGfo5AG6a8f45T9Mg6JIwsGJPoAalwn9Vvn2DZOApvmdu3r1+UPZb+xFI2Nv3sxCovmdP6BudNPqlpg3IWXNzV86kZtLvOy+F1LI8AZXVds7s5AxHwg3dIxVMgDSnqJ1ffUfXJCURc17lgLX925kMXB9jRgI0Z5cDI64pZ4sBiNxbb0Q10JEQF9BbtBBDTGkBSLQJDFAFy0Gjn+mGHjuYCGDYqDe3hcljUlBu8vPO9QAe5CiadMBXZlqEgU44rZ/djpwQiS3qgEkzegk5G2zAXH0SwrgXbYCgIkUwDb3xQZQ6x5cAZr7WnEVgLEUwJQAQLXOcRWA7riXBMC/aAFAw7g9VwDQUEmmEwCo1m3eZcgDNNBcXWlTVzxrdeBVMQ/HZFgqol1k7ewg4QYLaWAg0rajYQxoGJuikCa+K+5rMhOhJW9ymHvMvKa4cgygZwTHWanUaRLJDqlg3xuwqRSrGFdQB+lTqI6VZkX9bDg/LwE7RzbHC6nGCt0pfqS/R6g6ot71Bl/7i2+oj45UgxHXz2fgseULwxE3rDYga3Z8xA1nu8Oix4SJilq4fMg2W3oNtEOBpsliJgo01ux+Ytrw2f1Q1178BA==&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<rect x="0" y="0" width="880" height="750" rx="112.5" ry="112.5" fill="#d0cee2" stroke="#56517e" pointer-events="all"/>
<path d="M 520 735 L 520 15" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="400" y="15" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 30px; margin-left: 401px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<font style="font-size: 14px">
Ext Host
</font>
</div>
</div>
</div>
</foreignObject>
<text x="430" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Ext Host
</text>
</switch>
</g>
<rect x="560" y="15" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 30px; margin-left: 561px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<font style="font-size: 14px">
UI
</font>
</div>
</div>
</div>
</foreignObject>
<text x="590" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
UI
</text>
</switch>
</g>
<rect x="560" y="235" width="240" height="340" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="580" y="275" width="200" height="220" rx="12" ry="12" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="580" y="515" width="200" height="50" rx="10" ry="10" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="590" y="285" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 300px; margin-left: 591px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Notebook Editor
</div>
</div>
</div>
</foreignObject>
<text x="650" y="304" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Notebook Editor
</text>
</switch>
</g>
<rect x="590" y="525" width="90" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 540px; margin-left: 591px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Text Editor
</div>
</div>
</div>
</foreignObject>
<text x="635" y="544" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Text Editor
</text>
</switch>
</g>
<rect x="560" y="235" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 250px; margin-left: 561px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Interactive Editor
</div>
</div>
</div>
</foreignObject>
<text x="620" y="254" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
Interactive Editor
</text>
</switch>
</g>
<rect x="595" y="115" width="170" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 602.5 115 M 602.5 115 C 637 113.16 666.73 113.56 757.5 115 M 602.5 115 C 636.53 114.87 669.78 116.13 757.5 115 M 757.5 115 C 762.95 114.4 765.51 116.45 765 122.5 M 757.5 115 C 764.02 114.15 762.87 116.07 765 122.5 M 765 122.5 C 766.18 133.13 766.11 145.17 765 157.5 M 765 122.5 C 764.68 132.41 765.6 142.53 765 157.5 M 765 157.5 C 763.84 160.57 763.67 163.08 757.5 165 M 765 157.5 C 763.03 160.49 762.05 163.92 757.5 165 M 757.5 165 C 716.75 164.5 674.73 164.16 602.5 165 M 757.5 165 C 719.45 164.4 682.67 164.75 602.5 165 M 602.5 165 C 597.87 165.43 594.18 161.95 595 157.5 M 602.5 165 C 598.61 166.49 596.11 162.29 595 157.5 M 595 157.5 C 594.86 146.1 593.71 135.16 595 122.5 M 595 157.5 C 594.78 150.05 594.2 142.69 595 122.5 M 595 122.5 C 594.3 118.51 598.61 116.76 602.5 115 M 595 122.5 C 593.57 119.48 596.38 116.62 602.5 115" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 140px; margin-left: 596px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookService
</div>
</div>
</div>
</foreignObject>
<text x="680" y="144" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookService
</text>
</switch>
</g>
<path d="M 680 285 L 680 171.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 680 166.12 L 683.5 173.12 L 680 171.37 L 676.5 173.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="587.5" y="645" width="185" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 595 645 M 595 645 C 630.38 647.66 664.94 644.45 765 645 M 595 645 C 657.15 643.29 717.27 642.98 765 645 M 765 645 C 771.86 645.46 770.77 645.7 772.5 652.5 M 765 645 C 771.91 645.28 772.3 649.53 772.5 652.5 M 772.5 652.5 C 773.13 664.85 772.19 676.08 772.5 687.5 M 772.5 652.5 C 773.44 661.04 771.85 669.88 772.5 687.5 M 772.5 687.5 C 772.54 691.38 768.14 693.64 765 695 M 772.5 687.5 C 771.75 690.62 771.42 695.54 765 695 M 765 695 C 713.02 694 661.62 693.71 595 695 M 765 695 C 719.55 695.65 671.7 694.71 595 695 M 595 695 C 590.6 694.85 586.33 693.01 587.5 687.5 M 595 695 C 590.17 696.46 588.33 692.48 587.5 687.5 M 587.5 687.5 C 586.11 676.46 588.92 667.95 587.5 652.5 M 587.5 687.5 C 588.01 673.98 587.87 662.64 587.5 652.5 M 587.5 652.5 C 587.67 648.5 588.01 644.15 595 645 M 587.5 652.5 C 589.43 645.33 590.91 646.56 595 645" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 183px; height: 1px; padding-top: 670px; margin-left: 589px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
TextModelResolverService
</div>
</div>
</div>
</foreignObject>
<text x="680" y="674" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
TextModelResolverService
</text>
</switch>
</g>
<path d="M 680 540 L 680 638.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 680 643.88 L 676.5 636.88 L 680 638.63 L 683.5 636.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="260" y="115" width="160" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 267.5 115 M 267.5 115 C 299.32 114.83 330.23 116.02 412.5 115 M 267.5 115 C 310.91 115.1 355.05 115.23 412.5 115 M 412.5 115 C 416.77 116.51 420.02 118.96 420 122.5 M 412.5 115 C 415.21 116.4 421.73 118.39 420 122.5 M 420 122.5 C 419.38 136.58 421.56 146.99 420 157.5 M 420 122.5 C 420.2 131.67 420.11 139.23 420 157.5 M 420 157.5 C 421.23 162.18 416.6 164.2 412.5 165 M 420 157.5 C 420.47 160.75 416.2 167.16 412.5 165 M 412.5 165 C 365.54 163.6 317.01 163.34 267.5 165 M 412.5 165 C 368.88 164.96 323.2 164.73 267.5 165 M 267.5 165 C 263.33 164.28 258.48 164.06 260 157.5 M 267.5 165 C 261.73 166.42 260.55 162.67 260 157.5 M 260 157.5 C 261.36 146.82 260.14 140.74 260 122.5 M 260 157.5 C 259.24 146.91 259.53 134.6 260 122.5 M 260 122.5 C 261.04 118.49 261.4 115.53 267.5 115 M 260 122.5 C 260.69 115.79 260.84 116.51 267.5 115" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 140px; margin-left: 261px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ExthostNotebook
</div>
</div>
</div>
</foreignObject>
<text x="340" y="144" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ExthostNotebook
</text>
</switch>
</g>
<path d="M 595 140 L 426.37 140" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 421.12 140 L 428.12 136.5 L 426.37 140 L 428.12 143.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="260" y="645" width="160" height="50" rx="7.5" ry="7.5" fill="none" stroke="none" pointer-events="all"/>
<path d="M 267.5 645 M 267.5 645 C 297.03 646.17 329.59 643.76 412.5 645 M 267.5 645 C 303.18 646.68 340.35 645.24 412.5 645 M 412.5 645 C 418.17 643.57 421.78 648.21 420 652.5 M 412.5 645 C 415.61 642.92 419.06 647.26 420 652.5 M 420 652.5 C 418.83 661.3 420.14 667.9 420 687.5 M 420 652.5 C 419.45 660.31 420.86 668.58 420 687.5 M 420 687.5 C 418.42 692.98 417.57 694.76 412.5 695 M 420 687.5 C 421.69 690.87 418.07 694.18 412.5 695 M 412.5 695 C 359.1 693.14 305.99 692.92 267.5 695 M 412.5 695 C 363.88 694.24 315.55 694.72 267.5 695 M 267.5 695 C 263.55 693.7 258.13 691.12 260 687.5 M 267.5 695 C 260.79 696.39 260.27 692.87 260 687.5 M 260 687.5 C 260.11 681.18 258.85 669.53 260 652.5 M 260 687.5 C 259.97 677.83 260.7 668.56 260 652.5 M 260 652.5 C 261.91 648.48 262.3 646.92 267.5 645 M 260 652.5 C 259.45 646.25 262.87 646.45 267.5 645" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 670px; margin-left: 261px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ExthostEditors
</div>
</div>
</div>
</foreignObject>
<text x="340" y="674" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ExthostEditors
</text>
</switch>
</g>
<path d="M 587.5 670 L 426.37 670" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 421.12 670 L 428.12 666.5 L 426.37 670 L 428.12 673.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="40" y="285" width="190" height="160" rx="24" ry="24" fill="none" stroke="none" pointer-events="all"/>
<path d="M 64 285 M 64 285 C 94.63 286.83 123.5 285 206 285 M 64 285 C 106.38 285.75 150.97 286.33 206 285 M 206 285 C 222.83 285.74 230 293.14 230 309 M 206 285 C 222.38 284.33 228.26 293.48 230 309 M 230 309 C 231.07 331.51 230.31 354.58 230 421 M 230 309 C 231.11 351.09 231.75 393.59 230 421 M 230 421 C 228.11 438.72 223.21 443.2 206 445 M 230 421 C 231.94 439.12 223.39 446.71 206 445 M 206 445 C 161.51 443.89 114.58 444.14 64 445 M 206 445 C 163.88 444.89 120.87 444.54 64 445 M 64 445 C 47.66 443.09 40.09 437.75 40 421 M 64 445 C 49.29 443.68 41.64 437.28 40 421 M 40 421 C 40.27 396.47 40.58 370.41 40 309 M 40 421 C 39.89 395.03 40.64 369.65 40 309 M 40 309 C 41.94 293.9 46.11 286.83 64 285 M 40 309 C 41.28 292.41 46.38 285.82 64 285" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="60" y="295" width="110" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 310px; margin-left: 61px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
ExthostInteractive
</div>
</div>
</div>
</foreignObject>
<text x="115" y="314" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
ExthostInteracti...
</text>
</switch>
</g>
<path d="M 170 365 L 330 365 Q 340 365 340 355 L 340 171.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 340 166.12 L 343.5 173.12 L 340 171.37 L 336.5 173.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="60" y="350" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 58px; height: 1px; padding-top: 365px; margin-left: 62px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookEditor
</div>
</div>
</div>
</foreignObject>
<text x="62" y="369" fill="#000000" font-family="Helvetica" font-size="14px">
NotebookE...
</text>
</switch>
</g>
<path d="M 120 400 L 340 400 Q 350 400 350 410 L 350 638.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 350 643.88 L 346.5 636.88 L 350 638.63 L 353.5 636.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="60" y="385" width="60" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 58px; height: 1px; padding-top: 400px; margin-left: 62px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Input
</div>
</div>
</div>
</foreignObject>
<text x="62" y="404" fill="#000000" font-family="Helvetica" font-size="14px">
Input
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 25 KiB

View File

@@ -0,0 +1,352 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1081px" height="601px" viewBox="-0.5 -0.5 1081 601" content="&lt;mxfile&gt;&lt;diagram id=&quot;e9QGGNZdVJSySoEGsC2r&quot; name=&quot;Page-1&quot;&gt;7Vtbc+I2FP4tfWCmfSBj2diBx1w23Z1pOzubndnuo2IL0ERYriwg3l9fyZawZcmEDYYmjXkB667znfPpHB0zCm5WT78zmC3/pAkiI99LnkbB7cj3AZgA8SVLiqokmgRVwYLhRDWqC+7xD6QKPVW6xgnKjYacUsJxZhbGNE1RzI0yyBjdms3mlJizZnCBrIL7GBK79BtO+LIqnYZeXf4R4cVSzww8VbOCurEqyJcwodtGUfBhFNwwSnn1a/V0g4gUnpZL1e+uo3a3MIZSfkgHjcQGkrXanFoYL/RuGV2nCZIdwCi43i4xR/cZjGXtVuArypZ8RVQ1gQ+IXMP4cVF2u6GEsnKYYF5+RJM5JqRRnngxQmLj1zln9BE1asIoBJdimmu1RsQ4eurcKNiJT+gdoivEWSGa6A4agsJUpW2NH/CmqnDZAC/SHaFSmsVu7Fqu4ocSrVvM0+el/Ixcm0JLaSqlYuICWawMJZLNacobkvTKTzc8asSqlrIEsVaNhc1uxB6wCf0WNg5wAs+BDZj2gI3GYh84KBH2rx6VRJrYnFnYcjX7RS0WT9cs1q3UhjhkC6SadUHCEIEcb8zxjxJvYIn3C4JJOZVapEvaf0jpmGKGBC9S8TsWe0VCMtdS6bBg5StVscJJQkrLQDn+AR/K8aTYMopTXu4hvB6Ft6/DPtThpJZZHwlNMCtV7DQc78IPAyXfg4FTo32WMqmHGre70Pk8F8rSRnq3iIPABwfY1nsmvkmL+CKb+PzIRXygD+Lz/vfE59nEB2bnIr6JJd5blCOGBY8JdfW9vyhHD5Q+3kIOBw7s5kDPDdiOA8F0OjuOA/vlvAPM6j1zXmRynssTFzPanBf2QHnRsYwnNsmKv5VJlQ/f5cMFALva26dm9W3RfPoszF8sWlpuWfjaCTSw+XN6JH263Y/wsh2etdCulqB6HWefl5YSxAxBjvKBhDtJONpr02PvYhJMJwaCR7ql/VLypCcz98NnrPwNGjToiDF6d4iAfQsyGN5zhlep7j7LC7yZaXlj8JpMzz5y94E+mGTtQp7BJO27GQuVn7r9dTiub9hVBaF/EZrOqu9wVi/D0zirdvyoI8YPCeaUlXmVLyinROzyHrENdtylid1zEyNTZEqOLuAOJluXUtRqo21QaYEgtP7VoAewdzFH0XpuZgh8R1wS9AD1zGGHEZHA5RlMDUSjf9YyOVSKcJyXMr0SDYCfPZWC0PXi10J+3+NVRpDSHEN19BRicdUsVYdBhV4e2kbyODLiGAdhnEyLgCuZ15Maaeq5wwR9o+wRp4sbmhWlIt3BWOhUMehTz/oUgdbp40pankyZXL5BT8rUVCCYwoXActCd03PR5RnV5/irttfut4OZ7bhXEj9HcmG4xHpBJuHZWyxvpm8HC8MxO/J2MzLGnJjd+wmzbQ9Sn9hdkcE7zkG0D9ZgeiAzRn0wo+2lSadqgMmCadYKycAstGFypccnfcAUdlrUV+GEqAhqAKvLpsJDI59ebGr2k85FfZt4sbs//N6se6OXifpNw//kVS9trg2TYWiBc+lf+N7dvVw+oxuc1P7+A9Ou/pzKRps8FoY1xtInEVGlXJ3YYLxEq+EViT2OTcc7LbVjAy5D3zBP/zjHplfnJbBPxIbepIp1Jfj67ZlO/TEVZ4PRlheZ+w3DA8gBjIxUw1vPNLjI4XyvQ9nZvwZYF0LNOcMPa45paoP7ay7WzNfZb8OJ23CPWm8PBlOHezRxnLi9JCc8C4qXnbjeGzeqwJG/C851DRAckMB7xxYCpqZPOnFk78CJ4ofATt99qvmuSsNYWA3Xmy/M1jmQPdnVZtBXsPHmqS90UN+5mM8OzwfmazJf6+rE9eKCy0D68A0C193/IamjOVxhUlTJo4+IbJBksFIgXldqSVVU412V4QJbQdKo20ARNIhvwYOQr5n83+jedjHMuppslaBk5URB5RHEBeOOxc5inC7snpRlS5iqIf2qTPL8WFG2LN6xtq7DQg1TNZOnt1rWcCYGE8HOSs+kKFUiW/6xtTHNVuidubDdWGIvD49YDCfHrFRxrHTDnjNBMWVQuuZjvsTxY4pyNRFOMcd6p+22DVT2tosrG7DazQmFvL3NBOcZgYVuTnAqI71f8CqjjMNUpRk7stfVsfspzdZ8yDie+EgGJ3yBRjzW/5Gubhzqf5oHH/4F&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<rect x="0" y="0" width="1080" height="600" rx="90" ry="90" fill="#d0cee2" stroke="#56517e" pointer-events="all"/>
<rect x="420" y="100" width="300" height="180" rx="10.8" ry="10.8" fill="none" stroke="#000000" pointer-events="all"/>
<path d="M 700 205 L 823.63 205" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 828.88 205 L 821.88 208.5 L 823.63 205 L 821.88 201.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 206px; margin-left: 761px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Read resource
</div>
</div>
</div>
</foreignObject>
<text x="761" y="209" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
Read resource
</text>
</switch>
</g>
<rect x="440" y="150" width="260" height="110" rx="6.6" ry="6.6" fill="none" stroke="#000000" pointer-events="all"/>
<path d="M 575 250 L 575 363.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 575 368.88 L 571.5 361.88 L 575 363.63 L 578.5 361.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 322px; margin-left: 576px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Deserialize NotebookData
</div>
</div>
</div>
</foreignObject>
<text x="576" y="325" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
Deserialize NotebookData
</text>
</switch>
</g>
<rect x="460" y="200" width="230" height="50" rx="3" ry="3" fill="none" stroke="#000000" pointer-events="all"/>
<path d="M 239.99 210 L 414.3 122.83" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 419 120.48 L 414.3 126.74 L 414.3 122.83 L 411.17 120.48 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 182px; margin-left: 290px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
creates
</div>
</div>
</div>
</foreignObject>
<text x="290" y="186" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
creates
</text>
</switch>
</g>
<path d="M 298.7 210 L 433.79 178.93" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 438.91 177.75 L 432.87 182.73 L 433.79 178.93 L 431.3 175.91 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 200px; margin-left: 348px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
creates
</div>
</div>
</div>
</foreignObject>
<text x="348" y="204" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
creates
</text>
</switch>
</g>
<path d="M 327.5 223.54 L 453.65 213.03" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 458.89 212.59 L 452.2 216.66 L 453.65 213.03 L 451.62 209.69 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 218px; margin-left: 393px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
creates
</div>
</div>
</div>
</foreignObject>
<text x="393" y="221" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
creates
</text>
</switch>
</g>
<rect x="52.5" y="210" width="275" height="50" rx="3" ry="3" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="130" y="220" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 235px; margin-left: 131px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookEditorModelResolverService
</div>
</div>
</div>
</foreignObject>
<text x="190" y="239" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookEditorMod...
</text>
</switch>
</g>
<rect x="466.25" y="110" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 125px; margin-left: 467px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<span style="font-size: 12px;">
SimpleNotebookEditorModel
</span>
</div>
</div>
</div>
</foreignObject>
<text x="526" y="129" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
SimpleNoteboookEd...
</text>
</switch>
</g>
<rect x="515" y="200" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 215px; margin-left: 516px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<span style="font-size: 12px;">
NotebookFileWorkingCopyModelFactory
</span>
</div>
</div>
</div>
</foreignObject>
<text x="575" y="219" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookFileWorki...
</text>
</switch>
</g>
<rect x="466.25" y="160" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 175px; margin-left: 467px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<span style="font-size: 12px;">
WorkingCopyManager
</span>
</div>
</div>
</div>
</foreignObject>
<text x="526" y="179" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
WorkingCopyManager
</text>
</switch>
</g>
<path d="M 575 430 L 575 503.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 575 508.88 L 571.5 501.88 L 575 503.63 L 578.5 501.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 471px; margin-left: 591px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
creates
</div>
</div>
</div>
</foreignObject>
<text x="591" y="474" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
creates
</text>
</switch>
</g>
<rect x="515" y="370" width="120" height="60" rx="3.6" ry="3.6" fill="none" stroke="#000000" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 400px; margin-left: 516px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookService
</div>
</div>
</div>
</foreignObject>
<text x="575" y="404" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
NotebookService
</text>
</switch>
</g>
<rect x="830" y="185" width="160" height="40" rx="2.4" ry="2.4" fill="none" stroke="#000000" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 205px; margin-left: 831px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
FileService
</div>
</div>
</div>
</foreignObject>
<text x="910" y="209" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
FileService
</text>
</switch>
</g>
<rect x="515" y="510" width="120" height="60" rx="3.6" ry="3.6" fill="none" stroke="#000000" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 540px; margin-left: 516px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
NotebookTextModel
</div>
</div>
</div>
</foreignObject>
<text x="575" y="544" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
NotebookTextModel
</text>
</switch>
</g>
<path d="M 910 375 L 910 231.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 910 226.12 L 913.5 233.12 L 910 231.37 L 906.5 233.12 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 314px; margin-left: 909px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
register FS provider
<br/>
for vscode-interactive schema
</div>
</div>
</div>
</foreignObject>
<text x="909" y="317" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
register FS provider...
</text>
</switch>
</g>
<path d="M 840 400 L 641.37 400" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 636.12 400 L 643.12 396.5 L 641.37 400 L 643.12 403.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 400px; margin-left: 737px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
register notebook serializer
<br/>
for interactive viewtype
</div>
</div>
</div>
</foreignObject>
<text x="737" y="403" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
register notebook serializer...
</text>
</switch>
</g>
<rect x="840" y="375" width="140" height="50" rx="3" ry="3" fill="none" stroke="#000000" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 400px; margin-left: 841px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
interactive.contribution
<br/>
(startup)
</div>
</div>
</div>
</foreignObject>
<text x="910" y="404" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
interactive.contributio...
</text>
</switch>
</g>
<path d="M 190 70 L 190 103.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 190 108.88 L 186.5 101.88 L 190 103.63 L 193.5 101.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="85" y="30" width="210" height="40" rx="2.4" ry="2.4" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="130" y="30" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 45px; margin-left: 131px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
InteractiveEditor
</div>
</div>
</div>
</foreignObject>
<text x="190" y="49" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
InteractiveEditor
</text>
</switch>
</g>
<path d="M 190 160 L 190 203.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 190 208.88 L 186.5 201.88 L 190 203.63 L 193.5 201.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="80" y="110" width="220" height="50" rx="3" ry="3" fill="none" stroke="#000000" pointer-events="all"/>
<rect x="130" y="120" width="120" height="30" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 135px; margin-left: 131px;">
<div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<span style="font-family: Helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">
NotebookEditorInput
</span>
</div>
</div>
</div>
</foreignObject>
<text x="190" y="139" fill="#000000" font-family="Helvetica" font-size="14px" text-anchor="middle">
NotebookEditorInp...
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Text is not SVG - cannot display
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 30 KiB

View File

@@ -0,0 +1,654 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2361px" height="1021px" viewBox="-0.5 -0.5 2361 1021" content="&lt;mxfile&gt;&lt;diagram id=&quot;b1th27OaiNIVZPbSBiyb&quot; name=&quot;Page-1&quot;&gt;7V1bc5s4FP41nn1qB0nc/JhLm33Y7nSm3W37iI1is8GWB3Di9NevAGGDJMdKK0SM3IfUCIPNd3Run86RJ+hmtbvLos3yE4lxOoFOvJug2wmEwAtC+l858lyPQBgG9cgiS2L2rsPAl+QnZoMOG90mMc47bywISYtk0x2ck/Uaz4vOWJRl5Kn7tnuSdj91Ey2wMPBlHqXi6LckLpb1aOg5h/E/cbJYNp8MHHZmFs0fFhnZrtnnTSC6r/7Vp1dRcy/2/nwZxeSpNYQ+TNBNRkhRv1rtbnBagtvAVl/38cjZ/ffO8LpQuQBO6yseo3SLm69cfbHiuQGDfsdN+RLv6C2vY7KdVWcAPaieFJf3cujR0zIp8JdNNC9PP9GpQceWxSplb75P0vSGpCSrbotiD4exS8fzIiMPuHUmhDPk+/SM+DTsAR9xVuBda4g93R0mK1xkz/Qt7KwLvPoSNhWnDPing1hByMaWLZG6jUQjNpUW+1sf4KQvGKJydD3/NLo4pjOPHa7JGncxO4pATrbZnN3Cdeux8lYvYpLhNCqSx+4klz0gu/QzSejH7rFEEL4PvQC4sP7r+x1okctBVkTZAhfsJhxq+2+lBKTvXIDUAyS4AKkHSHgBUguQzRO+BOTBzYDTbqZ2J43bhszxfGtse+lxltF8uc3wXXnpbXgYuFovqo90PdFdgVkEcHm3/AEX8+UpIb7CQ8Guh5K6KF/qon7fQwEFe3DW/v8d4AIAAExGAAqT+7zh9QaFVyG+GrXteOc5nPGQwd+X8XAVorJxww84+BE0CD8S0P+bFHhGyAMd/SvJS/f+b4KfBJkUtalpAR+lyWJNX88pFpiidl1ikNB8+IqdWCVxXF5+neE8+RnVJqo0SpsyBKgewrueeLflvbYFyeuMHgjmh4VBOrD3EWd5fAn2UII91JHZCdh/w7PHCmw/WpXTej3LN9WTOgXZ0L90rjQWb3Si4J2ALILpSxIqLlZDIM74qzruZZ/MFFBfbK4ctYmGt1T0DcmKkc6wgJthCIlTTGZndcwwoJDq2eXmjEYZQPRzAvy6YmgdYEHeL0msIXRkczXUgZZoDq2KCgT0TUYFILDdUkDeTpskM6D1+QgPPwwU4fd1wP8KLukpeq5sBA8CMxF+Y0Nw9uER16YESO3KMWh5i5SRIiraFgpnCX3C0qwx+/b5MHKdr6PNV1LTm7wb0Tkx+rB4Mpm7fWncK3zzReT6RO4OKHKRc7vLCA0nHLYiDp1Z+V29sSa7qAnTXrKxoK9sV4ww8nlG0vRrRTKMmGMIYBd2WVg97Qv10FbUEU/vG0Qd2R7O8SuDMvD7Y5cVKoNGjb6wtmKW3De4MKsBLDjlpqrEKfZHeiCRobOJ9BDAdyUTtS/OA9lev8G7SKSac2sxE+JClN3oQ08RfR2MB1KoP7ikv7rTX97cyUTeV/aLFBjei8S1SzwcUOKncr+xEh3QOR3S9ZZwq2vZGwh+xVIU5SU/HV7I+kUn/1dXPXTYB9E8WI6+0fjXVYh/z7rANnQH7F9yba+vDb0BKSDXdsPOo2+U/3QVDPsbikECnis2SsC5IllsEwEngG+SgPMUmOJRm4nAHTAA8RRSFavQN0rAeZf6kwHoGN7cmaRjvFd01F0krk3iCix7bxIXUzw7CDiBVTJIwPkqXTXr+Krca6VENY3yPJl3IadPnj1/bx/8KCF97zWHtzsGcX30zI6OQidrjG835DTp6smGnBaAngTAZuw3e+p9n4tLeI9XP4/QRC/cSGh+AdyNNG5rICrbVfzftorfqz62USoaj68jKlrQl6IpJPknFW2XFN9br380akVfH3SsPGhUbK+aznvH8brq6U7RCQWtjlqeTF1rm16ettY2CyxvRGs9TmtdXtlUtVbYeIBPtDVqrchV/LOJI5pmHBzlGBWXr3tpcGinHlLOQ4PiDrRxFgMvjvLlPlAsDz5HBZXauhqhQZEA+qS0ar6vbd+HgGdGZZTHVKanOvgmX0R/33/t8C3Y4++/5k2Nyf7rxjFeRFF7i64kZFRUb5IQiUCLJcEvnJmUBHAMLh4MsyzJVeT4RtclgWN7cXo45S2+Qc4bSPafsBv+wOyebefVGxBwGVUgIQ973BBBsn2HVWuTPPqyEobeHKHK5h2jthQB5yinqstjeiyF7c0ZPPyhZN+g3lYn92nZZbHK6GKVf1rmfS1WAXBpCRlC5N6QIj/Vkz/aBcrgdGDX1wIleGkLxmNsx3SskggbmJt0XBZl9LUnBVDZhves2Q6A4KB0h/UtHgChIfkO65s8BPwDkzWWwORimw60+NY5w4yHZOMUmxgPEX6jlIfKzh3jNhYQDsl5SDYDsRx/s6QHutRkD5ABC0bPaAqssgnMRebaZQ6mQ8rc1rpswJfbGOU9JHvO2Mt7gP3vAAxCfKjsBvNLxbt1jfzR8t2jyHVqbZvHfiOFtXw5fPCr5fDADY+svuuvrAWSbRDHXxAPHL6+IRTVqq+K+H3zrJbek329+o/2wZHCdi6iuA/neD6XkYuz0HM9ZU1skGpXve9LxN6KdnI+zeN1SlU7eTX3+vvpSNBMDEuLsH1+bxAJzzGV5XlaWCZJJyYQ0KfXJJscn4Y3yjf1D3nfJ7sS04F+zpBvtQISnrk35kjS6SixfGeGqPCDLEYRFYNldO6ICl0vRgEVV0LccwdU2L3DKKBifOn+cfaIotPLpb0hKvmJc+/cAQUgMIYoPcwIKdpRGUVl+YnEuHzH/w==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
<defs/>
<g>
<rect x="1170" y="20" width="180" height="400" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="1172" y="22" width="176" height="396" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<path d="M 1180 253.18 L 1084.14 268.97" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1078.96 269.82 L 1085.3 265.23 L 1084.14 268.97 L 1086.44 272.13 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1180 253.18 L 1084.14 268.97" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1078.96 269.82 L 1085.3 265.23 L 1084.14 268.97 L 1086.44 272.13 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1180 253.18 L 1084.14 268.97" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1078.96 269.82 L 1085.3 265.23 L 1084.14 268.97 L 1086.44 272.13 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1180 253.18 L 1084.14 268.97" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1078.96 269.82 L 1085.3 265.23 L 1084.14 268.97 L 1086.44 272.13 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1180" y="220" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1181.62 258.62 C 1181.62 258.62 1181.62 258.62 1181.62 258.62 M 1181.62 258.62 C 1181.62 258.62 1181.62 258.62 1181.62 258.62 M 1188.69 254.38 C 1187.69 253.87 1187.1 252.76 1184.45 250.13 M 1188.69 254.38 C 1187.57 253.32 1185.97 251.8 1184.45 250.13 M 1200 254.38 C 1192.42 250.61 1189.23 243.56 1184.45 238.82 M 1200 254.38 C 1193.41 248.54 1188.17 242.02 1184.45 238.82 M 1211.32 254.38 C 1200.99 247.04 1192.6 236.09 1181.62 224.68 M 1211.32 254.38 C 1200.19 244.6 1191.08 234.75 1181.62 224.68 M 1222.63 254.38 C 1214.41 243.4 1204.6 233.87 1187.27 219.02 M 1222.63 254.38 C 1211.75 243.01 1201.29 233.81 1187.27 219.02 M 1233.94 254.38 C 1222.92 242.23 1209.89 227.15 1198.59 219.02 M 1233.94 254.38 C 1223.62 244.84 1212.98 233.78 1198.59 219.02 M 1245.26 254.38 C 1233.64 243.2 1225.54 233.88 1209.9 219.02 M 1245.26 254.38 C 1231.64 239.77 1217.34 225.98 1209.9 219.02 M 1256.57 254.38 C 1243.14 243.58 1233.98 232.74 1221.22 219.02 M 1256.57 254.38 C 1246.79 243.95 1235.25 232.16 1221.22 219.02 M 1267.88 254.38 C 1255.26 243.68 1242.38 229.97 1232.53 219.02 M 1267.88 254.38 C 1255.7 241.12 1242.85 230.73 1232.53 219.02 M 1279.2 254.38 C 1271.51 247.67 1265.49 240.75 1243.84 219.02 M 1279.2 254.38 C 1266.34 242.55 1255.32 228.78 1243.84 219.02 M 1290.51 254.38 C 1279.05 243.12 1271.34 234.38 1255.16 219.02 M 1290.51 254.38 C 1282.46 245.28 1274.43 237.38 1255.16 219.02 M 1301.83 254.38 C 1292.73 245.02 1281.21 236.29 1266.47 219.02 M 1301.83 254.38 C 1291.1 244.17 1282.72 234.36 1266.47 219.02 M 1313.14 254.38 C 1299.52 241.55 1289.66 229.38 1277.78 219.02 M 1313.14 254.38 C 1302.04 242.58 1289.46 231.47 1277.78 219.02 M 1324.45 254.38 C 1315.54 246.65 1305.31 234.37 1289.1 219.02 M 1324.45 254.38 C 1310.31 240.97 1297.73 227.57 1289.1 219.02 M 1339.3 257.91 C 1327.18 243.59 1314.46 231.78 1300.41 219.02 M 1339.3 257.91 C 1327.47 246.89 1314.99 233.88 1300.41 219.02 M 1344.25 251.55 C 1336.72 244.25 1330.23 236.84 1311.73 219.02 M 1344.25 251.55 C 1331.87 238.51 1318.49 226.71 1311.73 219.02 M 1344.96 240.94 C 1338.28 233.37 1328.81 224.01 1323.04 219.02 M 1344.96 240.94 C 1339.55 234.79 1335.48 230.85 1323.04 219.02 M 1340.72 225.38 C 1340.12 223.72 1338.02 222.85 1334.35 219.02 M 1340.72 225.38 C 1339.16 223.45 1336.79 221.64 1334.35 219.02" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1186 220 M 1186 220 C 1244.1 220.48 1303.51 217.74 1334 220 M 1186 220 C 1219.19 220.41 1250.9 220.24 1334 220 M 1334 220 C 1336.24 220.37 1339.95 220.4 1340 226 M 1334 220 C 1336.62 221.05 1340.88 223.36 1340 226 M 1340 226 C 1338.61 235.25 1342.13 240.94 1340 254 M 1340 226 C 1339.42 230.95 1340.62 237.92 1340 254 M 1340 254 C 1338.68 256.16 1337.07 258.41 1334 260 M 1340 254 C 1339.88 257.88 1337.07 260.29 1334 260 M 1334 260 C 1283.39 262.26 1234.01 259.03 1186 260 M 1334 260 C 1295.32 261.8 1255.95 260.54 1186 260 M 1186 260 C 1180.05 258.72 1179.66 258.55 1180 254 M 1186 260 C 1182.67 257.98 1179.44 255.93 1180 254 M 1180 254 C 1179.72 244.64 1181.32 236.18 1180 226 M 1180 254 C 1180.36 247.19 1179.77 240.55 1180 226 M 1180 226 C 1179.35 223.63 1183.32 218.95 1186 220 M 1180 226 C 1181.48 221.35 1183.31 220.8 1186 220" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="640" y="40" width="180" height="400" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="642" y="42" width="176" height="396" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="240" y="40" width="180" height="400" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="242" y="42" width="176" height="396" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="250" y="140" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 251.74 178.74 C 251.74 178.74 251.74 178.74 251.74 178.74 M 251.74 178.74 C 251.74 178.74 251.74 178.74 251.74 178.74 M 258.81 174.5 C 256.29 172.1 255.49 171.11 253.86 169.55 M 258.81 174.5 C 257.13 172.82 255.74 171.83 253.86 169.55 M 270.13 174.5 C 262.97 167.31 257.7 165.37 253.86 158.24 M 270.13 174.5 C 266.3 170.89 260.8 165.81 253.86 158.24 M 281.44 174.5 C 271.21 164.13 261.66 155.16 251.74 144.8 M 281.44 174.5 C 273.9 166.39 265.76 158.57 251.74 144.8 M 292.76 174.5 C 282.35 165.42 273.56 153.6 257.4 139.15 M 292.76 174.5 C 285.3 165.72 276.88 157.1 257.4 139.15 M 304.07 174.5 C 293.39 162.72 281.04 154.17 268.71 139.15 M 304.07 174.5 C 293.17 164.33 281.39 152.58 268.71 139.15 M 315.38 174.5 C 308.2 166.95 299.74 160.51 280.03 139.15 M 315.38 174.5 C 300.41 159.93 286.95 146.86 280.03 139.15 M 326.7 174.5 C 315.9 164.91 305.35 152.61 291.34 139.15 M 326.7 174.5 C 314.47 162.11 301.56 149.64 291.34 139.15 M 338.01 174.5 C 324.82 162.3 310.63 148.78 302.66 139.15 M 338.01 174.5 C 325.64 161.68 312.78 148.71 302.66 139.15 M 349.32 174.5 C 339.23 165.78 330.09 151.78 313.97 139.15 M 349.32 174.5 C 336.43 161.82 324.28 150.36 313.97 139.15 M 360.64 174.5 C 349.83 163.95 338.02 153.23 325.28 139.15 M 360.64 174.5 C 348.09 161.02 334.92 148.81 325.28 139.15 M 371.95 174.5 C 363.23 165.44 355.47 157.29 336.6 139.15 M 371.95 174.5 C 364.1 166.67 358.38 159.94 336.6 139.15 M 383.27 174.5 C 371.07 165.08 364.7 152.11 347.91 139.15 M 383.27 174.5 C 373.03 163.95 363.3 153.52 347.91 139.15 M 394.58 174.5 C 385.79 165.06 379.46 157.53 359.22 139.15 M 394.58 174.5 C 386.3 165.85 377.69 157.74 359.22 139.15 M 409.43 178.04 C 400.79 168.08 392.77 161.82 370.54 139.15 M 409.43 178.04 C 398.49 167.02 388.22 158.28 370.54 139.15 M 414.38 171.67 C 405.53 164.6 396.8 153.75 381.85 139.15 M 414.38 171.67 C 403.68 161.22 391.84 148.78 381.85 139.15 M 414.38 160.36 C 407.6 155.79 402.91 147.45 393.16 139.15 M 414.38 160.36 C 410.09 155.46 404.52 151.25 393.16 139.15 M 410.84 145.51 C 409.62 144.06 407.44 141.89 404.48 139.15 M 410.84 145.51 C 408.2 142.67 406.07 140.92 404.48 139.15" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 256 140 M 256 140 C 298.76 140.44 346.4 140.8 404 140 M 256 140 C 304.93 141.96 353.03 141.27 404 140 M 404 140 C 406.59 140.44 411.67 141.68 410 146 M 404 140 C 406.12 137.85 409.03 140.05 410 146 M 410 146 C 408.69 157.44 408.42 164.75 410 174 M 410 146 C 409.15 151.42 410.37 159.48 410 174 M 410 174 C 408.98 179.41 406.93 181.4 404 180 M 410 174 C 409.69 179.34 407.87 179.67 404 180 M 404 180 C 360.04 179.15 312.38 179.46 256 180 M 404 180 C 350.62 178.6 299.02 180.14 256 180 M 256 180 C 252.31 181.71 250.9 178.66 250 174 M 256 180 C 252.96 179.44 248.22 176.86 250 174 M 250 174 C 251.11 165.87 251.47 157.88 250 146 M 250 174 C 250.84 162.69 250.61 154.29 250 146 M 250 146 C 250.18 140.86 252.68 141.74 256 140 M 250 146 C 247.94 141.23 252.87 141.44 256 140" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="650" y="250" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 651.3 288.3 C 651.3 288.3 651.3 288.3 651.3 288.3 M 651.3 288.3 C 651.3 288.3 651.3 288.3 651.3 288.3 M 658.37 284.06 C 657.61 283.1 655.73 282.14 654.13 279.82 M 658.37 284.06 C 657.44 283.1 656.39 282.28 654.13 279.82 M 669.69 284.06 C 665.19 280.38 658.81 272.05 654.13 268.5 M 669.69 284.06 C 666.55 280.08 661.75 276.56 654.13 268.5 M 681 284.06 C 671.9 275.52 660.28 264.23 651.3 254.36 M 681 284.06 C 672.01 274.6 660.41 263.57 651.3 254.36 M 693.02 284.77 C 678.51 270.8 665.82 258.59 656.96 248.7 M 693.02 284.77 C 682.26 274.12 671.2 262.94 656.96 248.7 M 704.34 284.77 C 696.31 276.49 687.95 267.88 668.27 248.7 M 704.34 284.77 C 695.08 276.55 688.2 267.89 668.27 248.7 M 715.65 284.77 C 707.38 278.47 700.6 269.68 679.59 248.7 M 715.65 284.77 C 707.93 276.5 698.06 266.87 679.59 248.7 M 726.96 284.77 C 716.51 273.05 702.65 260.9 690.9 248.7 M 726.96 284.77 C 719.04 277.22 711.07 267.52 690.9 248.7 M 738.28 284.77 C 723.98 271.4 715.5 258.9 702.21 248.7 M 738.28 284.77 C 726.93 274.51 716.33 262.3 702.21 248.7 M 749.59 284.77 C 740.47 272.57 730.87 263.56 713.53 248.7 M 749.59 284.77 C 741.31 275.89 732.98 267.83 713.53 248.7 M 760.9 284.77 C 752.09 272.91 741.29 263.99 724.84 248.7 M 760.9 284.77 C 752.28 276.22 744.72 268.04 724.84 248.7 M 772.22 284.77 C 762.08 276.94 755.67 267.36 736.86 249.41 M 772.22 284.77 C 760.18 272.94 750.21 261.74 736.86 249.41 M 783.53 284.77 C 770.77 270.7 755.22 256.23 748.18 249.41 M 783.53 284.77 C 775.9 276.99 765.83 268.2 748.18 249.41 M 794.84 284.77 C 780.12 269.99 770.08 256.78 759.49 249.41 M 794.84 284.77 C 785.39 276.16 777.63 267.72 759.49 249.41 M 808.99 287.59 C 798.6 277.18 789.4 268.94 770.8 249.41 M 808.99 287.59 C 799.07 278.74 789.73 268.5 770.8 249.41 M 814.64 281.94 C 807.6 273.6 801.67 268.64 782.12 249.41 M 814.64 281.94 C 802.55 270.65 790.57 259.11 782.12 249.41 M 814.64 270.62 C 811.12 266.84 803.26 261.95 793.43 249.41 M 814.64 270.62 C 807.6 263.58 800.37 257.27 793.43 249.41 M 810.4 255.07 C 808.91 254.28 807.69 252.93 804.74 249.41 M 810.4 255.07 C 808.21 252.96 806.68 251.32 804.74 249.41" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 656 250 M 656 250 C 694.59 248.82 733.79 247.71 804 250 M 656 250 C 707.2 249.71 757.39 248.75 804 250 M 804 250 C 809.37 251.48 811.56 251.31 810 256 M 804 250 C 810.11 251.42 811.31 250.53 810 256 M 810 256 C 808.2 261.12 811.64 267.76 810 284 M 810 256 C 810.61 266.41 810.46 278.44 810 284 M 810 284 C 811.17 288.73 806.32 289.57 804 290 M 810 284 C 810 288.74 807.35 289.92 804 290 M 804 290 C 756.02 291.47 707.56 291.15 656 290 M 804 290 C 767.15 288.96 731.23 289.74 656 290 M 656 290 C 650.23 290.19 649.53 289.41 650 284 M 656 290 C 650.25 292.23 651.04 289.07 650 284 M 650 284 C 651.45 273.74 648.46 265.46 650 256 M 650 284 C 649.18 277.21 649.24 268.65 650 256 M 650 256 C 648.5 250.86 651.78 251.74 656 250 M 650 256 C 649.95 251.39 654.02 248.94 656 250" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="120" y="90" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 180px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="180" y="104" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<rect x="240" y="20" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 300px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Webview top -1000
</div>
</div>
</div>
</foreignObject>
<text x="300" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Webview top -1000
</text>
</switch>
</g>
<path d="M 300 220 L 523.63 220" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 528.88 220 L 521.88 223.5 L 523.63 220 L 521.88 216.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="40" y="260" width="60" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 270px; margin-left: 70px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Viewport
</div>
</div>
</div>
</foreignObject>
<text x="70" y="274" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Viewport
</text>
</switch>
</g>
<rect x="650" y="140" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 651.15 178.15 C 651.15 178.15 651.15 178.15 651.15 178.15 M 651.15 178.15 C 651.15 178.15 651.15 178.15 651.15 178.15 M 658.93 174.61 C 657.24 172.93 656.33 172.26 653.98 169.66 M 658.93 174.61 C 657.67 173.68 656.33 171.75 653.98 169.66 M 670.24 174.61 C 666.64 169.34 661.67 165.97 653.98 158.35 M 670.24 174.61 C 664.68 170.77 661.33 165.08 653.98 158.35 M 681.55 174.61 C 670.48 163.78 662.42 155.79 651.15 144.21 M 681.55 174.61 C 669.95 163.89 660.61 152.74 651.15 144.21 M 692.87 174.61 C 683.45 168.09 677.73 160.17 656.8 138.55 M 692.87 174.61 C 682.37 164.45 674.1 155.2 656.8 138.55 M 704.18 174.61 C 690.69 161.64 675.04 144.64 668.12 138.55 M 704.18 174.61 C 692.94 163.12 680.98 151.3 668.12 138.55 M 715.49 174.61 C 703.76 162.96 688.13 148.09 680.14 139.26 M 715.49 174.61 C 704.91 163.44 693.83 152.78 680.14 139.26 M 726.81 174.61 C 717.86 164.64 707.05 158.34 691.45 139.26 M 726.81 174.61 C 716.62 166.14 707.62 156.76 691.45 139.26 M 738.12 174.61 C 729.92 164.52 720.21 159.33 702.77 139.26 M 738.12 174.61 C 728.08 165.09 716.13 153.49 702.77 139.26 M 749.44 174.61 C 743.6 167.85 734.73 160.69 714.08 139.26 M 749.44 174.61 C 738.12 162.06 725.19 151.25 714.08 139.26 M 760.75 174.61 C 752.88 167.12 744.68 158.08 725.39 139.26 M 760.75 174.61 C 752.73 165.28 743.29 157.12 725.39 139.26 M 772.06 174.61 C 762.48 167.18 752.88 155.88 736.71 139.26 M 772.06 174.61 C 759.85 162.11 747.12 148.48 736.71 139.26 M 783.38 174.61 C 775.62 164.93 768.38 156.42 748.02 139.26 M 783.38 174.61 C 772.8 163.39 760.56 150.82 748.02 139.26 M 794.69 174.61 C 784.04 165.05 772.61 151.97 759.34 139.26 M 794.69 174.61 C 787.04 168.41 778.99 160.39 759.34 139.26 M 809.54 178.15 C 797.63 164.78 787.73 156.16 770.65 139.26 M 809.54 178.15 C 801.3 169.83 791.82 160.35 770.65 139.26 M 814.49 171.78 C 804.02 159.94 794.66 152.5 781.96 139.26 M 814.49 171.78 C 803.17 159.88 791.11 148.18 781.96 139.26 M 814.49 160.47 C 806.72 151.83 798.83 144.84 793.28 139.26 M 814.49 160.47 C 809.82 154.16 804.18 149.25 793.28 139.26 M 810.95 145.62 C 808.2 143.77 806.66 140.92 804.59 139.26 M 810.95 145.62 C 808.95 143.66 807.69 142.21 804.59 139.26" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 656 140 M 656 140 C 707.36 139.37 763.42 138.34 804 140 M 656 140 C 687.27 139.19 717.1 138.72 804 140 M 804 140 C 807.46 140.7 810.31 143 810 146 M 804 140 C 808.05 139.52 808.32 140.53 810 146 M 810 146 C 809.74 157.07 809.32 167.44 810 174 M 810 146 C 810.25 153.57 809.86 159.55 810 174 M 810 174 C 809.93 179.17 806.26 181.9 804 180 M 810 174 C 808.2 178.69 807.89 179.71 804 180 M 804 180 C 746.73 181.14 688.12 180.86 656 180 M 804 180 C 748.29 181.05 693.13 181.37 656 180 M 656 180 C 652.18 180.69 650.42 176.05 650 174 M 656 180 C 652.55 182.25 648.32 175.71 650 174 M 650 174 C 649.21 161.32 648.99 152.1 650 146 M 650 174 C 650.13 164.35 650.38 157.1 650 146 M 650 146 C 649.04 143.85 650.79 140.18 656 140 M 650 146 C 652.01 139.91 651.92 139.33 656 140" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="520" y="120" width="200" height="280" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="522" y="122" width="196" height="276" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="520" y="90" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 580px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="580" y="104" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<rect x="540" y="320" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 541.5 358.5 C 541.5 358.5 541.5 358.5 541.5 358.5 M 541.5 358.5 C 541.5 358.5 541.5 358.5 541.5 358.5 M 548.57 354.26 C 547.86 352.55 546.67 352.48 544.33 350.02 M 548.57 354.26 C 547.18 352.73 545.85 351.62 544.33 350.02 M 559.89 354.26 C 557.36 350.83 554.33 346.99 544.33 338.7 M 559.89 354.26 C 554.6 349.09 550.51 343.99 544.33 338.7 M 571.2 354.26 C 563.63 346.67 557.32 338.83 541.5 324.56 M 571.2 354.26 C 562.71 344.87 553.71 336.44 541.5 324.56 M 582.52 354.26 C 574.62 345.77 569.79 339.5 547.16 318.91 M 582.52 354.26 C 569.25 341.23 556.12 329.34 547.16 318.91 M 593.83 354.26 C 586.23 346.91 578.2 337.29 558.47 318.91 M 593.83 354.26 C 582.21 342.2 568.86 329.69 558.47 318.91 M 605.14 354.26 C 595.05 341.55 583.88 329.15 569.79 318.91 M 605.14 354.26 C 595.67 345.8 588.18 337.57 569.79 318.91 M 616.46 354.26 C 607.96 346.32 599.71 336.36 581.1 318.91 M 616.46 354.26 C 604.83 342.96 594.95 333.55 581.1 318.91 M 627.77 354.26 C 618.06 342.07 606.79 332.31 592.41 318.91 M 627.77 354.26 C 618.63 344.71 609.13 335.67 592.41 318.91 M 639.08 354.26 C 631.47 345.64 621.53 334.52 603.73 318.91 M 639.08 354.26 C 629.23 344.56 620.8 335.46 603.73 318.91 M 650.4 354.26 C 638.36 342.74 621.69 328.6 615.04 318.91 M 650.4 354.26 C 642.24 345.04 632.02 336.04 615.04 318.91 M 662.42 354.97 C 654.55 346.58 644.17 338.94 626.36 318.91 M 662.42 354.97 C 651.79 343.44 639.34 331.32 626.36 318.91 M 673.73 354.97 C 664.61 347.89 657.52 336.31 637.67 318.91 M 673.73 354.97 C 662.95 345.68 653.67 335.33 637.67 318.91 M 685.05 354.97 C 677.12 346.14 667.74 335.51 648.98 318.91 M 685.05 354.97 C 671.27 342.12 656.93 327.13 648.98 318.91 M 699.19 357.8 C 691.91 350.12 682.61 341.04 660.3 318.91 M 699.19 357.8 C 685.15 345.56 673.52 331.9 660.3 318.91 M 704.14 351.43 C 697.47 345.31 690.66 336.05 671.61 318.91 M 704.14 351.43 C 694.72 342.28 683.67 330.49 671.61 318.91 M 704.84 340.83 C 702.1 336.1 697.75 330.08 682.92 318.91 M 704.84 340.83 C 698.38 334.04 690.9 326.31 682.92 318.91 M 700.6 325.27 C 698.75 322.61 696.74 320.56 694.24 318.91 M 700.6 325.27 C 699.13 323.34 696.65 321.76 694.24 318.91" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 546 320 M 546 320 C 595.15 319.96 641.86 319.9 694 320 M 546 320 C 582.87 320.54 620.19 321.57 694 320 M 694 320 C 696.55 321.31 700.29 322.86 700 326 M 694 320 C 699.42 317.91 698.93 324.07 700 326 M 700 326 C 700.42 335.04 698.1 347.01 700 354 M 700 326 C 699.62 334.65 699.42 343.7 700 354 M 700 354 C 698.81 357.96 698.2 360.46 694 360 M 700 354 C 698.04 356.47 696.39 359.01 694 360 M 694 360 C 665.04 359.86 630.87 361.96 546 360 M 694 360 C 658.19 360.88 623.93 361.64 546 360 M 546 360 C 543.96 361.84 540.59 359.97 540 354 M 546 360 C 543.28 361.54 538.62 359.84 540 354 M 540 354 C 540.05 345.24 540.56 335.59 540 326 M 540 354 C 540.19 345.32 539.14 337.98 540 326 M 540 326 C 540.11 321.32 540.71 319.7 546 320 M 540 326 C 539.32 322.16 541.03 318.19 546 320" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="540" y="200" width="160" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/>
<path d="M 542.05 257.55 C 542.05 257.55 542.05 257.55 542.05 257.55 M 542.05 257.55 C 542.05 257.55 542.05 257.55 542.05 257.55 M 549.83 254.01 C 548.16 251.27 546.4 250.89 543.46 247.65 M 549.83 254.01 C 547.44 251.94 545.19 249.67 543.46 247.65 M 561.85 254.72 C 554.37 248.43 548.73 242.49 543.46 236.34 M 561.85 254.72 C 555.98 250.53 551.93 244.19 543.46 236.34 M 573.16 254.72 C 567.28 247.24 558.41 243.49 543.46 225.02 M 573.16 254.72 C 562.84 244.22 552.75 234.88 543.46 225.02 M 584.47 254.72 C 574.96 243.36 563.28 237.1 543.46 213.71 M 584.47 254.72 C 570.52 239.41 555.76 226.16 543.46 213.71 M 595.79 254.72 C 582.07 240.38 564.3 226.24 542.76 201.69 M 595.79 254.72 C 580.62 239.96 566.96 225.34 542.76 201.69 M 607.1 254.72 C 592.05 239.46 575.25 222.23 550.53 198.15 M 607.1 254.72 C 594.49 243.29 582.04 229.78 550.53 198.15 M 618.42 254.72 C 607.73 241.41 593.62 229.34 561.85 198.15 M 618.42 254.72 C 598.77 234.72 579.17 214.46 561.85 198.15 M 629.73 254.72 C 608.52 231.3 585.02 208.42 573.16 198.15 M 629.73 254.72 C 612.5 237.42 597.12 221.05 573.16 198.15 M 641.04 254.72 C 617.72 231.67 594.49 210.28 584.47 198.15 M 641.04 254.72 C 625.2 238.95 608.91 223.84 584.47 198.15 M 652.36 254.72 C 638.86 241.88 626.46 226.52 595.79 198.15 M 652.36 254.72 C 631.68 233.58 612.14 213.77 595.79 198.15 M 663.67 254.72 C 640.44 234.96 619.71 212.72 607.81 198.86 M 663.67 254.72 C 644.22 235.6 625.34 215.78 607.81 198.86 M 674.98 254.72 C 660.32 239.92 642.32 221.21 619.12 198.86 M 674.98 254.72 C 653 233.1 630.79 211.03 619.12 198.86 M 691.25 259.67 C 678.61 244.86 665.42 233.13 630.44 198.86 M 691.25 259.67 C 669.26 237.7 646.99 213.93 630.44 198.86 M 699.03 256.13 C 677.28 235.24 656.4 210.22 641.75 198.86 M 699.03 256.13 C 685.3 243.84 673.46 230.24 641.75 198.86 M 703.98 249.77 C 687.1 231.69 670.84 217.67 653.06 198.86 M 703.98 249.77 C 687.07 232.41 669.79 215.15 653.06 198.86 M 704.68 239.16 C 691.22 226.56 677.1 209.65 664.38 198.86 M 704.68 239.16 C 689.21 223.65 673.92 207.42 664.38 198.86 M 704.68 227.85 C 694.08 215.32 683.16 202.67 675.69 198.86 M 704.68 227.85 C 693.42 216.48 682.37 206.55 675.69 198.86 M 704.68 216.54 C 699 210.96 691.24 202.99 687.01 198.86 M 704.68 216.54 C 699.22 212.18 695.2 206.74 687.01 198.86" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 549 200 M 549 200 C 589.62 199.98 631.67 201.85 691 200 M 549 200 C 595.2 200.38 642.58 199.46 691 200 M 691 200 C 698.63 198.42 698.99 204.78 700 209 M 691 200 C 697.12 199.42 699.91 203.43 700 209 M 700 209 C 701.63 222.93 698.31 234.71 700 251 M 700 209 C 700.8 223.17 700.18 237.85 700 251 M 700 251 C 701.08 257.52 695.61 261.42 691 260 M 700 251 C 698.67 257.02 698.68 261.15 691 260 M 691 260 C 642.67 262.77 591.95 259.45 549 260 M 691 260 C 638.75 261 588.59 261 549 260 M 549 260 C 544.51 258.6 539.85 256.29 540 251 M 549 260 C 542.04 259.13 541.51 257.61 540 251 M 540 251 C 538.98 235.18 539.97 220.01 540 209 M 540 251 C 540.81 237.9 538.91 226.34 540 209 M 540 209 C 538.24 203.35 542.72 199.24 549 200 M 540 209 C 541.82 203.38 542.2 198.48 549 200" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="540" cy="220" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="520" y="200" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 537.16 222.84 C 537.16 222.84 537.16 222.84 537.16 222.84 M 537.16 222.84 C 537.16 222.84 537.16 222.84 537.16 222.84" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="530" cy="220" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="510" y="200" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 528.71 224.22 C 528.71 224.22 528.71 224.22 528.71 224.22 M 528.71 224.22 C 528.71 224.22 528.71 224.22 528.71 224.22 M 534.37 218.56 C 533.13 217.79 533.17 216.63 530.83 215.03 M 534.37 218.56 C 533.18 217.39 532.21 216.38 530.83 215.03" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="375" y="200" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 210px; margin-left: 430px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Grow Height by 50
</div>
</div>
</div>
</foreignObject>
<text x="430" y="214" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Grow Height by 50
</text>
</switch>
</g>
<rect x="35" y="120" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 130px; margin-left: 80px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
scrollTop 1000
</div>
</div>
</div>
</foreignObject>
<text x="80" y="134" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
scrollTop 1000
</text>
</switch>
</g>
<rect x="440" y="120" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 130px; margin-left: 485px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
scrollTop 1000
</div>
</div>
</div>
</foreignObject>
<text x="485" y="134" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
scrollTop 1000
</text>
</switch>
</g>
<rect x="1180" y="120" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1181.41 158.41 C 1181.41 158.41 1181.41 158.41 1181.41 158.41 M 1181.41 158.41 C 1181.41 158.41 1181.41 158.41 1181.41 158.41 M 1188.48 154.17 C 1187.08 152.91 1184.53 150.68 1184.24 149.93 M 1188.48 154.17 C 1186.8 152.23 1185.1 150.94 1184.24 149.93 M 1199.8 154.17 C 1194.42 147.62 1190.85 144.92 1184.24 138.61 M 1199.8 154.17 C 1194.14 148.08 1189.57 143 1184.24 138.61 M 1211.11 154.17 C 1198.65 141.49 1189.44 133 1181.41 124.47 M 1211.11 154.17 C 1203.42 146.46 1197.55 139.24 1181.41 124.47 M 1222.43 154.17 C 1210.04 138.77 1195.1 126.78 1187.07 118.82 M 1222.43 154.17 C 1213.71 146.83 1207.41 138.23 1187.07 118.82 M 1233.74 154.17 C 1221.86 141.9 1207.87 127.59 1198.38 118.82 M 1233.74 154.17 C 1220.56 141.76 1208.3 128.13 1198.38 118.82 M 1245.05 154.17 C 1232.54 143.3 1220.29 131.83 1209.7 118.82 M 1245.05 154.17 C 1233.2 142.17 1221.94 131.49 1209.7 118.82 M 1256.37 154.17 C 1243.11 142.61 1228 129.36 1221.01 118.82 M 1256.37 154.17 C 1242.45 139.6 1228.97 125.93 1221.01 118.82 M 1268.39 154.88 C 1260.73 144.49 1248.42 136.49 1232.32 118.82 M 1268.39 154.88 C 1257.13 145.46 1247.1 133.12 1232.32 118.82 M 1279.7 154.88 C 1271.52 146.87 1262.75 137.31 1243.64 118.82 M 1279.7 154.88 C 1270.92 145.44 1261.46 136.71 1243.64 118.82 M 1291.01 154.88 C 1282.64 147.38 1271.5 135.71 1254.95 118.82 M 1291.01 154.88 C 1280.07 143.73 1270.19 134.41 1254.95 118.82 M 1302.33 154.88 C 1295.35 145.99 1287.09 137.39 1266.27 118.82 M 1302.33 154.88 C 1289.9 143.77 1278.84 130.62 1266.27 118.82 M 1313.64 154.88 C 1306.29 145.24 1297.93 137.06 1277.58 118.82 M 1313.64 154.88 C 1305.93 147.55 1297.26 139.58 1277.58 118.82 M 1324.96 154.88 C 1315.98 142.81 1304.99 134.96 1288.89 118.82 M 1324.96 154.88 C 1318.31 147.08 1310.44 139.12 1288.89 118.82 M 1339.1 157.71 C 1326.04 145.94 1312.45 132.77 1300.21 118.82 M 1339.1 157.71 C 1326.74 144.61 1312.17 131.71 1300.21 118.82 M 1344.75 152.05 C 1334.21 139.02 1318.89 129.31 1312.23 119.52 M 1344.75 152.05 C 1333.41 140.85 1321.96 128.63 1312.23 119.52 M 1344.75 140.74 C 1337.47 131.98 1327.66 124.25 1323.54 119.52 M 1344.75 140.74 C 1340.28 135.25 1334.78 130.73 1323.54 119.52 M 1340.51 125.18 C 1338.62 124.04 1337.57 122.58 1334.86 119.52 M 1340.51 125.18 C 1339.29 123.51 1337.97 122.35 1334.86 119.52" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1186 120 M 1186 120 C 1216.4 118.38 1245.98 120.9 1334 120 M 1186 120 C 1233.22 119.74 1279.71 119.15 1334 120 M 1334 120 C 1338.59 120.07 1340.08 121.36 1340 126 M 1334 120 C 1336.18 118.55 1341.15 121.59 1340 126 M 1340 126 C 1341.98 135.88 1338.79 144.72 1340 154 M 1340 126 C 1339.26 134.17 1339.14 142.5 1340 154 M 1340 154 C 1338.51 156.64 1339.51 160.54 1334 160 M 1340 154 C 1340.95 159.63 1338.34 160.56 1334 160 M 1334 160 C 1304.43 160.07 1271.14 160.25 1186 160 M 1334 160 C 1276.37 160.01 1219.14 159.64 1186 160 M 1186 160 C 1183.57 158.6 1178.47 159.1 1180 154 M 1186 160 C 1182.14 158.34 1181.93 159.24 1180 154 M 1180 154 C 1181.85 145.99 1178.35 137.28 1180 126 M 1180 154 C 1179.39 144.39 1179.96 134.41 1180 126 M 1180 126 C 1179.87 121.4 1183.86 118.35 1186 120 M 1180 126 C 1181.92 123.97 1180.37 119.53 1186 120" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="250" y="250" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 251.19 288.19 C 251.19 288.19 251.19 288.19 251.19 288.19 M 251.19 288.19 C 251.19 288.19 251.19 288.19 251.19 288.19 M 258.97 284.66 C 258 283.49 256.06 281.3 254.02 279.71 M 258.97 284.66 C 257.5 283.22 255.66 281.13 254.02 279.71 M 270.28 284.66 C 262.16 279.12 259.28 272.82 254.02 268.39 M 270.28 284.66 C 264.12 280.07 259.03 275.24 254.02 268.39 M 281.6 284.66 C 275.59 275.4 266.95 270.99 251.19 254.25 M 281.6 284.66 C 276.49 278.97 269.06 273.26 251.19 254.25 M 292.91 284.66 C 283.74 273.66 271.94 265.39 256.85 248.59 M 292.91 284.66 C 280.68 273.83 269.49 261.93 256.85 248.59 M 304.22 284.66 C 290.57 272.76 278.87 262.69 268.16 248.59 M 304.22 284.66 C 296.11 276.87 287.2 268.66 268.16 248.59 M 315.54 284.66 C 308.1 277.91 301.76 271.16 279.48 248.59 M 315.54 284.66 C 307.64 275.04 298.26 267.37 279.48 248.59 M 326.85 284.66 C 314.12 271.8 302.02 259.97 291.5 249.3 M 326.85 284.66 C 316.56 274.59 305.54 261.71 291.5 249.3 M 338.16 284.66 C 325.9 270.08 311.59 260.24 302.81 249.3 M 338.16 284.66 C 327.68 274.91 317.83 264.95 302.81 249.3 M 349.48 284.66 C 340.21 276.25 333.91 268.79 314.12 249.3 M 349.48 284.66 C 339.6 273.84 329.96 265.12 314.12 249.3 M 360.79 284.66 C 352.63 276.78 347.19 271.25 325.44 249.3 M 360.79 284.66 C 348.32 273.11 337.25 261.29 325.44 249.3 M 372.11 284.66 C 364.92 278.3 355.08 270.53 336.75 249.3 M 372.11 284.66 C 362.32 274.62 353.6 264.83 336.75 249.3 M 383.42 284.66 C 373.49 278.5 367.31 269.92 348.06 249.3 M 383.42 284.66 C 374.41 275.6 364.52 265.87 348.06 249.3 M 394.73 284.66 C 383.61 273.71 367.81 258.57 359.38 249.3 M 394.73 284.66 C 382.76 272.9 373.26 262.49 359.38 249.3 M 408.88 287.48 C 395.89 273.15 383.79 260.33 370.69 249.3 M 408.88 287.48 C 396.21 275.69 386.52 264.02 370.69 249.3 M 414.53 281.83 C 402.65 271.56 393.32 261.59 382.01 249.3 M 414.53 281.83 C 402.8 271.63 392.97 259.06 382.01 249.3 M 414.53 270.51 C 405.1 261.84 397.64 255.05 393.32 249.3 M 414.53 270.51 C 409.87 265.85 404.1 259.3 393.32 249.3 M 411 255.66 C 407.77 253.33 405.92 251.86 404.63 249.3 M 411 255.66 C 409.12 254.24 407.59 252.87 404.63 249.3" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 256 250 M 256 250 C 303.69 250.64 348.15 248.49 404 250 M 256 250 C 290.82 248.83 326.3 250.52 404 250 M 404 250 C 408.56 249.57 408.45 250.31 410 256 M 404 250 C 408.65 251.16 411.34 253.36 410 256 M 410 256 C 409.07 262.38 408.05 266.28 410 284 M 410 256 C 409.44 267.4 410.86 277.32 410 284 M 410 284 C 408.89 286.86 408.2 291.94 404 290 M 410 284 C 410.68 286.55 406.57 290.22 404 290 M 404 290 C 370.51 289.58 331.14 289.23 256 290 M 404 290 C 364.44 289.72 324.67 287.76 256 290 M 256 290 C 251.18 288.29 248.77 288.16 250 284 M 256 290 C 250.7 287.99 250.63 290.23 250 284 M 250 284 C 250.96 276.81 248.77 271.5 250 256 M 250 284 C 250.63 275.34 249.24 265.19 250 256 M 250 256 C 251.79 251.63 251.32 249.08 256 250 M 250 256 C 250.75 251.59 253.36 250.25 256 250" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1050" y="100" width="200" height="280" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1052" y="102" width="196" height="276" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1050" y="70" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 80px; margin-left: 1110px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="1110" y="84" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<rect x="1070" y="300" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1071.77 338.77 C 1071.77 338.77 1071.77 338.77 1071.77 338.77 M 1071.77 338.77 C 1071.77 338.77 1071.77 338.77 1071.77 338.77 M 1078.84 334.53 C 1077.02 332.28 1075.55 330.9 1073.89 329.58 M 1078.84 334.53 C 1077.75 333.14 1076.11 331.81 1073.89 329.58 M 1090.15 334.53 C 1085.44 327.64 1076.8 321.97 1073.89 318.26 M 1090.15 334.53 C 1085.94 329.15 1079.8 323.96 1073.89 318.26 M 1101.47 334.53 C 1091.78 322.45 1081.8 314.3 1071.77 304.83 M 1101.47 334.53 C 1093.64 327.9 1086.26 319.87 1071.77 304.83 M 1112.78 334.53 C 1102.44 321.85 1090.11 312.29 1077.43 299.17 M 1112.78 334.53 C 1105.73 326.26 1097.81 319.42 1077.43 299.17 M 1124.09 334.53 C 1112.13 325.3 1104.39 315.44 1088.74 299.17 M 1124.09 334.53 C 1116.75 327.7 1109.64 320.58 1088.74 299.17 M 1135.41 334.53 C 1127.18 324.98 1120.52 315.91 1100.05 299.17 M 1135.41 334.53 C 1124.56 325.09 1115.77 315.16 1100.05 299.17 M 1146.72 334.53 C 1133.54 319.65 1118.88 307.47 1111.37 299.17 M 1146.72 334.53 C 1137.86 325.99 1127.73 315.15 1111.37 299.17 M 1158.04 334.53 C 1147.29 326.04 1138.53 312.78 1122.68 299.17 M 1158.04 334.53 C 1146.65 322.09 1134.35 311.57 1122.68 299.17 M 1169.35 334.53 C 1154.78 320.91 1142.49 310.33 1133.99 299.17 M 1169.35 334.53 C 1155.29 322.16 1143.16 307.73 1133.99 299.17 M 1180.66 334.53 C 1173.61 327.62 1165.55 316.11 1145.31 299.17 M 1180.66 334.53 C 1170.33 322.87 1158.04 311.89 1145.31 299.17 M 1191.98 334.53 C 1182.19 324.97 1172.97 317.37 1156.62 299.17 M 1191.98 334.53 C 1181.09 323.28 1169.86 313.76 1156.62 299.17 M 1203.29 334.53 C 1194.55 325.59 1188.04 319.89 1167.94 299.17 M 1203.29 334.53 C 1192.98 323.34 1181.94 313.2 1167.94 299.17 M 1214.6 334.53 C 1200.58 322.65 1186.54 308.88 1179.25 299.17 M 1214.6 334.53 C 1203.42 321.37 1190.87 310.6 1179.25 299.17 M 1229.45 338.06 C 1223.38 330.34 1214.23 321.55 1190.56 299.17 M 1229.45 338.06 C 1214.59 322.2 1199.05 306.72 1190.56 299.17 M 1234.4 331.7 C 1223.37 319.71 1207.49 307.55 1201.88 299.17 M 1234.4 331.7 C 1222.77 318.75 1209.93 306.27 1201.88 299.17 M 1234.4 320.38 C 1228.47 311.91 1221.56 308.23 1213.19 299.17 M 1234.4 320.38 C 1227.49 313.71 1219.07 305.49 1213.19 299.17 M 1230.87 305.53 C 1228.54 302.34 1225.35 300.07 1224.5 299.17 M 1230.87 305.53 C 1229.37 304.09 1228.14 302.83 1224.5 299.17" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1076 300 M 1076 300 C 1125.9 300.04 1175.7 300.93 1224 300 M 1076 300 C 1134.82 300.44 1192.42 300.64 1224 300 M 1224 300 C 1229.46 298.96 1228.47 300.45 1230 306 M 1224 300 C 1227.28 298.18 1230.72 299.82 1230 306 M 1230 306 C 1227.83 314.41 1228.72 320.7 1230 334 M 1230 306 C 1230.07 314.32 1229.3 325.18 1230 334 M 1230 334 C 1230.01 338.07 1226.26 339.38 1224 340 M 1230 334 C 1230.83 338.78 1228.06 340.92 1224 340 M 1224 340 C 1191.8 340.86 1157.58 338.13 1076 340 M 1224 340 C 1194.14 339.89 1165.07 339.48 1076 340 M 1076 340 C 1073.4 341.13 1068.6 338.24 1070 334 M 1076 340 C 1069.97 338.7 1070.33 336.1 1070 334 M 1070 334 C 1070.12 326.88 1071.2 318 1070 306 M 1070 334 C 1070.58 324.37 1070.49 314.32 1070 306 M 1070 306 C 1070.72 300.17 1071.4 299.56 1076 300 M 1070 306 C 1068.84 303.93 1074.26 301.38 1076 300" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1070" y="180" width="160" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1072.31 237.81 C 1072.31 237.81 1072.31 237.81 1072.31 237.81 M 1072.31 237.81 C 1072.31 237.81 1072.31 237.81 1072.31 237.81 M 1080.09 234.28 C 1077.28 232.11 1074.65 229.51 1073.73 227.91 M 1080.09 234.28 C 1078.48 232.58 1076.94 230.94 1073.73 227.91 M 1091.41 234.28 C 1086.27 228.38 1079.78 224.37 1073.73 216.6 M 1091.41 234.28 C 1085.04 227.9 1078.75 222.43 1073.73 216.6 M 1102.72 234.28 C 1093.71 224.2 1086.22 215.82 1073.73 205.29 M 1102.72 234.28 C 1091.63 223.41 1080.2 210.99 1073.73 205.29 M 1114.03 234.28 C 1097.19 218.87 1085.11 202.5 1073.73 193.97 M 1114.03 234.28 C 1100.77 221.06 1087.85 208.06 1073.73 193.97 M 1125.35 234.28 C 1105.59 213.99 1085.43 193.26 1073.02 181.95 M 1125.35 234.28 C 1105.14 215.59 1086.91 194.69 1073.02 181.95 M 1136.66 234.28 C 1119.56 215.91 1101.37 200.5 1080.8 178.42 M 1136.66 234.28 C 1122.32 219.36 1104.88 203.35 1080.8 178.42 M 1147.97 234.28 C 1127.57 213.18 1107.42 192.68 1092.11 178.42 M 1147.97 234.28 C 1134.78 220.46 1120.68 209.01 1092.11 178.42 M 1160 234.99 C 1140 215.69 1123.19 196.16 1103.43 178.42 M 1160 234.99 C 1146.44 220.31 1131.81 205.47 1103.43 178.42 M 1171.31 234.99 C 1154.51 219.14 1138.63 203.6 1114.74 178.42 M 1171.31 234.99 C 1149 213.13 1126.91 190.99 1114.74 178.42 M 1182.62 234.99 C 1168.17 220.93 1154.85 206.42 1126.05 178.42 M 1182.62 234.99 C 1165.24 217.55 1148.17 198.97 1126.05 178.42 M 1193.94 234.99 C 1169.32 213.85 1149.07 189.7 1137.37 178.42 M 1193.94 234.99 C 1176.37 219 1159.74 201.52 1137.37 178.42 M 1205.25 234.99 C 1191.54 222.03 1178.16 205.62 1148.68 178.42 M 1205.25 234.99 C 1184.61 215.02 1162.16 192.53 1148.68 178.42 M 1221.51 239.94 C 1204.81 221.93 1189.32 205.98 1160 178.42 M 1221.51 239.94 C 1199.27 215.82 1175.64 193.42 1160 178.42 M 1229.29 236.4 C 1217.2 221.03 1203.72 210.89 1171.31 178.42 M 1229.29 236.4 C 1214.28 221.51 1200.59 207.45 1171.31 178.42 M 1234.24 230.04 C 1218.09 217.38 1203.82 200.37 1182.62 178.42 M 1234.24 230.04 C 1219 213.75 1202.81 199.7 1182.62 178.42 M 1234.24 218.72 C 1222.8 208.8 1211.86 197.38 1193.94 178.42 M 1234.24 218.72 C 1221.24 204.37 1207.68 190.81 1193.94 178.42 M 1234.24 207.41 C 1223.17 198.14 1211.28 184.05 1205.96 179.12 M 1234.24 207.41 C 1225.91 198.78 1217.76 191.46 1205.96 179.12 M 1234.95 196.8 C 1226.48 190.21 1222.23 183.07 1217.27 179.12 M 1234.95 196.8 C 1227.73 191.43 1221.73 183.92 1217.27 179.12" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1079 180 M 1079 180 C 1118.55 179.57 1160.99 181.49 1221 180 M 1079 180 C 1111.83 179.2 1145.56 178.65 1221 180 M 1221 180 C 1227.74 181.59 1228.81 181.81 1230 189 M 1221 180 C 1228.84 181.44 1231.99 181.61 1230 189 M 1230 189 C 1229.39 205.21 1229.79 219.03 1230 231 M 1230 189 C 1230.09 200.56 1228.78 214.33 1230 231 M 1230 231 C 1230.74 236.1 1228.58 240.22 1221 240 M 1230 231 C 1230.04 236.26 1225.68 239.45 1221 240 M 1221 240 C 1184 239.79 1146.9 240.97 1079 240 M 1221 240 C 1173.75 238.29 1126.88 238.91 1079 240 M 1079 240 C 1074.22 240.64 1071.24 235.09 1070 231 M 1079 240 C 1072.14 241.52 1072.02 236.73 1070 231 M 1070 231 C 1071.69 215.76 1069.49 203.67 1070 189 M 1070 231 C 1070.9 220.97 1069.24 212.27 1070 189 M 1070 189 C 1068.9 181.3 1072.28 179.25 1079 180 M 1070 189 C 1067.71 184.31 1074.24 179.02 1079 180" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1070" cy="200" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1050" y="180" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1067.67 202.86 C 1067.67 202.86 1067.67 202.86 1067.67 202.86 M 1067.67 202.86 C 1067.67 202.86 1067.67 202.86 1067.67 202.86 M 1074.74 198.62 C 1073.28 197.43 1073.1 196.88 1070.5 194.38 M 1074.74 198.62 C 1073.5 197.51 1073.08 196.55 1070.5 194.38" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1060" cy="200" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1040" y="180" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1057 203.63 C 1057 203.63 1057 203.63 1057 203.63 M 1057 203.63 C 1057 203.63 1057 203.63 1057 203.63 M 1064.07 199.39 C 1063.35 198.3 1062.06 197.18 1059.83 195.14 M 1064.07 199.39 C 1062.8 198.24 1061.79 197.07 1059.83 195.14" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="960" y="100" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 110px; margin-left: 1005px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
scrollTop 1050
</div>
</div>
</div>
</foreignObject>
<text x="1005" y="114" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
scrollTop 1050
</text>
</switch>
</g>
<rect x="120" y="120" width="200" height="260" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="122" y="122" width="196" height="256" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="140" y="200" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 141.29 238.29 C 141.29 238.29 141.29 238.29 141.29 238.29 M 141.29 238.29 C 141.29 238.29 141.29 238.29 141.29 238.29 M 148.36 234.05 C 148.02 233.4 146.48 231.65 144.12 229.8 M 148.36 234.05 C 147.38 232.58 145.96 231.76 144.12 229.8 M 159.67 234.05 C 156.75 228.84 150.29 225.23 144.12 218.49 M 159.67 234.05 C 154.44 228.17 149.52 223.53 144.12 218.49 M 171.69 234.75 C 161.73 225.95 154.26 216.35 141.29 204.35 M 171.69 234.75 C 163.79 227.89 157.09 221.18 141.29 204.35 M 183.01 234.75 C 170.96 220.57 156.03 207.55 146.94 198.69 M 183.01 234.75 C 170.7 222.33 158.61 210.87 146.94 198.69 M 194.32 234.75 C 181.99 221.92 167.39 204.66 158.26 198.69 M 194.32 234.75 C 183.86 225.06 174.16 214.74 158.26 198.69 M 205.63 234.75 C 195.62 225.33 185.82 214.76 169.57 198.69 M 205.63 234.75 C 192.49 221.34 177.87 205.68 169.57 198.69 M 216.95 234.75 C 205.6 222.3 196.95 213.06 180.89 198.69 M 216.95 234.75 C 205.07 223.64 192.78 211.15 180.89 198.69 M 228.26 234.75 C 219.04 224.94 210.83 219.21 192.2 198.69 M 228.26 234.75 C 219.66 225.65 209.53 215.44 192.2 198.69 M 239.58 234.75 C 233.4 225.79 222.71 216.87 203.51 198.69 M 239.58 234.75 C 225.55 220.71 211.42 207.51 203.51 198.69 M 250.89 234.75 C 237.61 221.9 229.31 212.96 214.83 198.69 M 250.89 234.75 C 236.83 221.83 223.24 208.4 214.83 198.69 M 262.2 234.75 C 254.33 226.43 247.06 221.25 226.85 199.4 M 262.2 234.75 C 247.78 220.72 233.89 207.27 226.85 199.4 M 273.52 234.75 C 260.98 222.87 249.27 212.72 238.16 199.4 M 273.52 234.75 C 260.97 222.57 247.85 207.79 238.16 199.4 M 284.83 234.75 C 273.13 223.19 261.22 213.35 249.48 199.4 M 284.83 234.75 C 275.38 225.22 265.56 215.38 249.48 199.4 M 298.97 237.58 C 289.68 228.66 281.99 217.72 260.79 199.4 M 298.97 237.58 C 286.2 224.85 272.98 212.76 260.79 199.4 M 304.63 231.92 C 293.57 218.37 281.44 205.66 272.1 199.4 M 304.63 231.92 C 296.77 223.96 289.34 215.7 272.1 199.4 M 304.63 220.61 C 301.25 215.39 293.34 212.12 283.42 199.4 M 304.63 220.61 C 296.55 212.84 288.07 203.52 283.42 199.4 M 300.39 205.05 C 299.14 203.51 297.44 201.72 294.73 199.4 M 300.39 205.05 C 298.83 203.19 297.57 201.81 294.73 199.4" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 146 200 M 146 200 C 196.64 199.38 244.33 198.33 294 200 M 146 200 C 188.93 199.65 233.4 199.66 294 200 M 294 200 C 298.81 198.16 299.27 202.45 300 206 M 294 200 C 296.39 201.21 300.07 200.75 300 206 M 300 206 C 299.51 211.28 301.26 221.15 300 234 M 300 206 C 300.28 214.35 300.33 220.95 300 234 M 300 234 C 300.36 236.77 298.12 241.11 294 240 M 300 234 C 299.66 237.97 296.65 238.61 294 240 M 294 240 C 247.38 241.09 203.49 242.67 146 240 M 294 240 C 262.36 240.55 233.1 240.58 146 240 M 146 240 C 140.27 240.34 140.94 239.44 140 234 M 146 240 C 141.27 238.38 140.12 239.53 140 234 M 140 234 C 139.68 223.3 140.18 213.46 140 206 M 140 234 C 140.27 223.69 139.38 213.27 140 206 M 140 206 C 140.39 203.55 141.07 200.04 146 200 M 140 206 C 138.33 203.53 142.7 198.45 146 200" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="140" y="300" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 141.49 338.49 C 141.49 338.49 141.49 338.49 141.49 338.49 M 141.49 338.49 C 141.49 338.49 141.49 338.49 141.49 338.49 M 148.56 334.25 C 147.99 332.88 145.97 331.79 144.32 330.01 M 148.56 334.25 C 147.45 333.44 146.41 332.07 144.32 330.01 M 159.88 334.25 C 156.96 330.8 153.08 325.29 144.32 318.69 M 159.88 334.25 C 153.36 327.91 148.82 323.53 144.32 318.69 M 171.19 334.25 C 165.31 327.45 156.35 321.62 141.49 304.55 M 171.19 334.25 C 159.91 323.01 149.04 311.81 141.49 304.55 M 182.5 334.25 C 173.12 326.54 167.63 315.92 147.15 298.89 M 182.5 334.25 C 174.88 325.01 166.66 318.27 147.15 298.89 M 193.82 334.25 C 182.74 323.99 173.52 313.66 158.46 298.89 M 193.82 334.25 C 186.19 326.16 176.98 315.67 158.46 298.89 M 205.13 334.25 C 192.67 322.64 181.93 308.33 169.78 298.89 M 205.13 334.25 C 192.37 321.26 179.14 307.56 169.78 298.89 M 216.45 334.25 C 205.69 323.35 195.36 313.59 181.09 298.89 M 216.45 334.25 C 206.1 324.87 196.87 312.82 181.09 298.89 M 227.76 334.25 C 216.47 324.08 207.5 315.39 192.4 298.89 M 227.76 334.25 C 214.22 322.17 202.12 308.01 192.4 298.89 M 239.07 334.25 C 226.05 322.29 215.07 307.7 203.72 298.89 M 239.07 334.25 C 225.16 320.65 211.58 306.25 203.72 298.89 M 250.39 334.25 C 239.79 324.25 227.43 313.53 215.03 298.89 M 250.39 334.25 C 238.05 320.41 224.56 308.27 215.03 298.89 M 262.41 334.96 C 248.05 323.33 233.94 309.8 226.35 298.89 M 262.41 334.96 C 247.5 320.23 234.24 306.86 226.35 298.89 M 273.72 334.96 C 261.3 320.36 247.97 308.74 237.66 298.89 M 273.72 334.96 C 266.48 326.77 256.87 318.54 237.66 298.89 M 285.04 334.96 C 270.17 320.99 256.4 308.58 248.97 298.89 M 285.04 334.96 C 274.2 325.05 262.95 313.24 248.97 298.89 M 299.18 337.79 C 288.15 326.35 280.45 318.4 260.29 298.89 M 299.18 337.79 C 284.09 322.1 267.46 306.19 260.29 298.89 M 304.13 331.42 C 293.36 322.55 284.35 314.47 271.6 298.89 M 304.13 331.42 C 291.96 320.1 280.42 307.52 271.6 298.89 M 304.83 320.81 C 296.78 314 289.15 303.3 282.91 298.89 M 304.83 320.81 C 296.94 311.73 289.53 305.29 282.91 298.89 M 300.59 305.26 C 299.01 303.36 297.36 301.51 294.23 298.89 M 300.59 305.26 C 298.47 302.63 296.47 300.91 294.23 298.89" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 146 300 M 146 300 C 200.52 301.27 256.26 298.82 294 300 M 146 300 C 184.93 299.35 223.78 298.06 294 300 M 294 300 C 297.03 299.88 300.87 303.23 300 306 M 294 300 C 296.67 299.97 301.12 301.46 300 306 M 300 306 C 300.33 314.71 300.1 324.74 300 334 M 300 306 C 300.84 315.29 299.73 324.42 300 334 M 300 334 C 301.73 338.13 299.31 340.83 294 340 M 300 334 C 299.63 336.61 300.04 342.15 294 340 M 294 340 C 248.72 340.07 200.6 338.92 146 340 M 294 340 C 254.5 339.54 215.98 338.06 146 340 M 146 340 C 142.22 338.97 140.97 336.23 140 334 M 146 340 C 144.17 341.92 142.02 337.59 140 334 M 140 334 C 138.25 326.32 138.9 316.24 140 306 M 140 334 C 139.71 324.68 140.15 314.24 140 306 M 140 306 C 140.6 302.24 143.45 298.35 146 300 M 140 306 C 138.71 301.22 142.52 300.06 146 300" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1600" y="20" width="180" height="400" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="1602" y="22" width="176" height="396" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="1610" y="250" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1611.43 288.43 C 1611.43 288.43 1611.43 288.43 1611.43 288.43 M 1611.43 288.43 C 1611.43 288.43 1611.43 288.43 1611.43 288.43 M 1618.5 284.18 C 1617.04 283.52 1615.46 281.31 1614.26 279.94 M 1618.5 284.18 C 1617.11 283.16 1616.25 281.72 1614.26 279.94 M 1629.81 284.18 C 1626.24 279.94 1620.21 277.08 1614.26 268.63 M 1629.81 284.18 C 1625.45 280.53 1622.09 275.63 1614.26 268.63 M 1641.13 284.18 C 1629.82 274.49 1620.07 260.73 1611.43 254.49 M 1641.13 284.18 C 1634.2 277.22 1626.31 269.93 1611.43 254.49 M 1652.44 284.18 C 1645.25 274.58 1634.73 270.26 1617.08 248.83 M 1652.44 284.18 C 1641.39 274.36 1631.13 263.03 1617.08 248.83 M 1663.75 284.18 C 1653.04 273.56 1639.13 260.7 1628.4 248.83 M 1663.75 284.18 C 1656.7 276.73 1648.64 268.93 1628.4 248.83 M 1675.07 284.18 C 1665.24 275.32 1657.94 265.2 1639.71 248.83 M 1675.07 284.18 C 1661.66 271.87 1647.6 257.45 1639.71 248.83 M 1686.38 284.18 C 1672.99 272.09 1664.05 259.78 1651.03 248.83 M 1686.38 284.18 C 1677.77 274.77 1669.91 267.4 1651.03 248.83 M 1698.4 284.89 C 1687.5 276.76 1679.65 267.68 1662.34 248.83 M 1698.4 284.89 C 1684.79 272.12 1672.44 258.29 1662.34 248.83 M 1709.72 284.89 C 1698.92 274.76 1690.86 267.05 1673.65 248.83 M 1709.72 284.89 C 1694.85 270.58 1680.12 255.59 1673.65 248.83 M 1721.03 284.89 C 1710.31 274.02 1701.87 265.09 1684.97 248.83 M 1721.03 284.89 C 1711 275.26 1702.49 267.26 1684.97 248.83 M 1732.34 284.89 C 1718.31 268.95 1704.42 254.83 1696.28 248.83 M 1732.34 284.89 C 1721.72 275.66 1712.95 264.36 1696.28 248.83 M 1743.66 284.89 C 1736.26 277.33 1726.59 265.68 1707.59 248.83 M 1743.66 284.89 C 1733.52 275.43 1725.03 264.5 1707.59 248.83 M 1754.97 284.89 C 1746.45 275.83 1739.98 269.87 1718.91 248.83 M 1754.97 284.89 C 1745.38 276.63 1737.28 266.64 1718.91 248.83 M 1769.11 287.72 C 1754.59 271.92 1738.2 258.41 1730.22 248.83 M 1769.11 287.72 C 1758.92 277.82 1751.84 269.41 1730.22 248.83 M 1774.77 282.06 C 1768.67 273.61 1757.89 268.98 1742.24 249.54 M 1774.77 282.06 C 1767.42 274.66 1760.85 267.23 1742.24 249.54 M 1774.77 270.75 C 1771.15 265.7 1763.52 262.75 1753.56 249.54 M 1774.77 270.75 C 1766.19 262.84 1758.7 253.1 1753.56 249.54 M 1770.53 255.19 C 1768.54 252.29 1766.02 250.68 1764.87 249.54 M 1770.53 255.19 C 1768.68 253.66 1767.5 252.08 1764.87 249.54" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1616 250 M 1616 250 C 1656.25 251.31 1694.17 249.76 1764 250 M 1616 250 C 1668.79 250.76 1720.85 249.98 1764 250 M 1764 250 C 1766.68 249.81 1769.14 251.95 1770 256 M 1764 250 C 1767.17 248.56 1768.37 250.17 1770 256 M 1770 256 C 1770.26 262.52 1769.82 270.93 1770 284 M 1770 256 C 1770.55 264.83 1769.42 274.86 1770 284 M 1770 284 C 1771.43 288.88 1769.45 291.83 1764 290 M 1770 284 C 1769.82 289.75 1769.23 288.17 1764 290 M 1764 290 C 1712.07 289.17 1662.23 288.5 1616 290 M 1764 290 C 1709.6 290.74 1653.71 290.46 1616 290 M 1616 290 C 1613.97 289.98 1609.73 286.12 1610 284 M 1616 290 C 1613.89 290.46 1608.64 286.66 1610 284 M 1610 284 C 1610.86 275.09 1608.74 264.54 1610 256 M 1610 284 C 1610.68 277.17 1610.76 270.5 1610 256 M 1610 256 C 1609.78 251.02 1610.09 249.56 1616 250 M 1610 256 C 1612.24 251.33 1612.95 249.42 1616 250" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1610" y="120" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1611.37 158.37 C 1611.37 158.37 1611.37 158.37 1611.37 158.37 M 1611.37 158.37 C 1611.37 158.37 1611.37 158.37 1611.37 158.37 M 1618.44 154.13 C 1616.67 152.75 1615.8 151.19 1614.2 149.89 M 1618.44 154.13 C 1617.52 153.16 1616.44 152.37 1614.2 149.89 M 1629.76 154.13 C 1626.19 151.33 1622.73 146.57 1614.2 138.57 M 1629.76 154.13 C 1624.11 150.01 1621.14 145.36 1614.2 138.57 M 1641.07 154.13 C 1629.64 146.22 1622.19 136.03 1611.37 124.43 M 1641.07 154.13 C 1628.6 142.63 1618.38 130.68 1611.37 124.43 M 1652.39 154.13 C 1640.52 143.67 1632.12 134.42 1617.03 118.78 M 1652.39 154.13 C 1638.72 140.89 1625.01 126.97 1617.03 118.78 M 1663.7 154.13 C 1654.68 145.81 1649.86 139.59 1628.34 118.78 M 1663.7 154.13 C 1650.21 141 1637.36 127.76 1628.34 118.78 M 1675.01 154.13 C 1662.55 142.88 1650.1 132.83 1639.66 118.78 M 1675.01 154.13 C 1661.01 141.96 1648.06 127.22 1639.66 118.78 M 1687.03 154.84 C 1673.79 143.14 1662.73 129.87 1650.97 118.78 M 1687.03 154.84 C 1678.86 146.78 1671.69 139.47 1650.97 118.78 M 1698.35 154.84 C 1688.45 142.15 1675.65 133.9 1662.29 118.78 M 1698.35 154.84 C 1688.75 145.32 1679.38 134.49 1662.29 118.78 M 1709.66 154.84 C 1695.78 141.45 1683.17 127.82 1673.6 118.78 M 1709.66 154.84 C 1701.13 146.62 1693.88 139.35 1673.6 118.78 M 1720.98 154.84 C 1712.73 145.89 1704.02 134.96 1684.91 118.78 M 1720.98 154.84 C 1712.4 146.03 1703.73 137.05 1684.91 118.78 M 1732.29 154.84 C 1719.14 143.67 1705.77 128.57 1696.23 118.78 M 1732.29 154.84 C 1722.18 145.2 1712.32 136.25 1696.23 118.78 M 1743.6 154.84 C 1731.84 144.79 1720.79 131.92 1707.54 118.78 M 1743.6 154.84 C 1731.1 142.41 1719.16 131.09 1707.54 118.78 M 1754.92 154.84 C 1743.44 144.32 1735.34 136 1718.85 118.78 M 1754.92 154.84 C 1744.13 143.68 1734.8 133.92 1718.85 118.78 M 1769.06 157.67 C 1760.88 150.67 1752.59 140.24 1730.87 119.48 M 1769.06 157.67 C 1757.01 146.04 1746.96 134.24 1730.87 119.48 M 1774.72 152.01 C 1762.4 141.73 1752.23 131.23 1742.19 119.48 M 1774.72 152.01 C 1763.71 140.6 1753.04 130.84 1742.19 119.48 M 1774.72 140.7 C 1766.25 134.74 1759.16 124.63 1753.5 119.48 M 1774.72 140.7 C 1766.58 132.16 1758.43 125.55 1753.5 119.48 M 1770.47 125.14 C 1768.33 123.69 1766.04 120.62 1764.82 119.48 M 1770.47 125.14 C 1768.29 123.14 1766.61 121.4 1764.82 119.48" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1616 120 M 1616 120 C 1660.13 119.21 1706.1 120.24 1764 120 M 1616 120 C 1664.79 118.45 1711.23 118.38 1764 120 M 1764 120 C 1768.9 121.54 1770.74 122.72 1770 126 M 1764 120 C 1767.44 121.92 1769.42 120.88 1770 126 M 1770 126 C 1771.64 135.95 1769.22 144.52 1770 154 M 1770 126 C 1769.67 135.76 1769.38 146.33 1770 154 M 1770 154 C 1768.81 156.23 1766.64 161.54 1764 160 M 1770 154 C 1769.79 158.39 1768.01 161.71 1764 160 M 1764 160 C 1713.41 161.11 1663.34 161.71 1616 160 M 1764 160 C 1731.34 159.73 1697.79 157.94 1616 160 M 1616 160 C 1611.92 158.61 1609.76 156.9 1610 154 M 1616 160 C 1612.19 159.39 1610.54 159.33 1610 154 M 1610 154 C 1609.43 148.11 1611.46 141.32 1610 126 M 1610 154 C 1610.11 148.17 1609.54 139.47 1610 126 M 1610 126 C 1609.99 123.71 1612.47 121.86 1616 120 M 1610 126 C 1608.02 123.62 1612.77 121.04 1616 120" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1480" y="100" width="200" height="280" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1482" y="102" width="196" height="276" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1480" y="70" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 80px; margin-left: 1540px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="1540" y="84" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<rect x="1500" y="300" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1501.73 338.73 C 1501.73 338.73 1501.73 338.73 1501.73 338.73 M 1501.73 338.73 C 1501.73 338.73 1501.73 338.73 1501.73 338.73 M 1508.8 334.49 C 1508.29 332.88 1506.31 332.6 1503.85 329.54 M 1508.8 334.49 C 1507.44 333.49 1506.42 332.14 1503.85 329.54 M 1520.11 334.49 C 1516.62 331.23 1509.8 323.14 1503.85 318.22 M 1520.11 334.49 C 1514.87 329.11 1508.89 324.06 1503.85 318.22 M 1531.43 334.49 C 1525.57 328.47 1517.84 321.95 1501.73 304.79 M 1531.43 334.49 C 1520.93 323.28 1509.22 311.71 1501.73 304.79 M 1542.74 334.49 C 1537.01 328.7 1528.27 318.92 1507.39 299.13 M 1542.74 334.49 C 1533.53 323.91 1523.77 315.05 1507.39 299.13 M 1554.05 334.49 C 1541.74 323.39 1526.27 309.28 1518.7 299.13 M 1554.05 334.49 C 1544.62 325.12 1534.68 314.32 1518.7 299.13 M 1565.37 334.49 C 1551.22 320.33 1542.01 311.51 1530.01 299.13 M 1565.37 334.49 C 1553.15 323.37 1541.06 311.73 1530.01 299.13 M 1576.68 334.49 C 1565.89 324.45 1555.88 313.13 1541.33 299.13 M 1576.68 334.49 C 1568.58 326.71 1560.2 318.44 1541.33 299.13 M 1588 334.49 C 1580.91 326.42 1570.68 317.65 1552.64 299.13 M 1588 334.49 C 1580.73 325.53 1572.71 318.61 1552.64 299.13 M 1599.31 334.49 C 1589.57 326.24 1581.99 315.26 1563.95 299.13 M 1599.31 334.49 C 1590.83 325.23 1582.07 316.54 1563.95 299.13 M 1610.62 334.49 C 1600.78 325.12 1590.26 313.17 1575.27 299.13 M 1610.62 334.49 C 1598.12 322.4 1585.75 309.43 1575.27 299.13 M 1621.94 334.49 C 1614.05 327.6 1605.83 315.87 1586.58 299.13 M 1621.94 334.49 C 1612.57 323.29 1602.34 314.14 1586.58 299.13 M 1633.25 334.49 C 1618.35 321.15 1605.17 306.08 1597.9 299.13 M 1633.25 334.49 C 1620.51 323.2 1609.51 311.08 1597.9 299.13 M 1644.56 334.49 C 1632.04 321.74 1620.23 311.71 1609.21 299.13 M 1644.56 334.49 C 1632.99 322.75 1621.98 311.94 1609.21 299.13 M 1659.41 338.02 C 1653.77 330.26 1644.77 321.76 1620.52 299.13 M 1659.41 338.02 C 1650.27 329.1 1640.62 319.57 1620.52 299.13 M 1664.36 331.66 C 1651.46 319.67 1641.02 311.1 1631.84 299.13 M 1664.36 331.66 C 1656.37 322.78 1646.25 314.1 1631.84 299.13 M 1664.36 320.34 C 1659.76 316.64 1654.38 311.41 1643.15 299.13 M 1664.36 320.34 C 1657.2 311.12 1647.58 304.15 1643.15 299.13 M 1660.83 305.5 C 1659.43 304.7 1658.13 301.68 1654.46 299.13 M 1660.83 305.5 C 1659.06 303.38 1656.91 301.18 1654.46 299.13" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1506 300 M 1506 300 C 1556.66 297.16 1609.53 299.01 1654 300 M 1506 300 C 1555.17 300.34 1605.45 299.71 1654 300 M 1654 300 C 1658.37 300.61 1660.64 302.04 1660 306 M 1654 300 C 1659.73 298.45 1657.91 300.17 1660 306 M 1660 306 C 1659.25 315.39 1659.34 325.59 1660 334 M 1660 306 C 1660.53 315.98 1659.18 324.66 1660 334 M 1660 334 C 1661.21 338.18 1658.32 338.31 1654 340 M 1660 334 C 1659.02 336.48 1659.74 338.23 1654 340 M 1654 340 C 1618.55 337.85 1584.3 338.3 1506 340 M 1654 340 C 1600.48 339.86 1547 340.28 1506 340 M 1506 340 C 1502.84 340.41 1500.62 336.51 1500 334 M 1506 340 C 1501.26 340.45 1502.05 336.96 1500 334 M 1500 334 C 1500.18 328.52 1501.85 320.41 1500 306 M 1500 334 C 1500.4 323.42 1499.29 312.65 1500 306 M 1500 306 C 1501.34 303.02 1502.08 299.43 1506 300 M 1500 306 C 1498.36 301.1 1502.89 299.97 1506 300" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1500" y="180" width="160" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1502.27 237.77 C 1502.27 237.77 1502.27 237.77 1502.27 237.77 M 1502.27 237.77 C 1502.27 237.77 1502.27 237.77 1502.27 237.77 M 1510.05 234.24 C 1509.05 232.9 1507.58 231.71 1503.69 227.87 M 1510.05 234.24 C 1507.73 231.78 1504.8 228.82 1503.69 227.87 M 1521.37 234.24 C 1517.21 228.4 1512.63 226.08 1503.69 216.56 M 1521.37 234.24 C 1514.29 227.84 1508.15 220.49 1503.69 216.56 M 1532.68 234.24 C 1521.63 224.34 1510.53 211.71 1503.69 205.25 M 1532.68 234.24 C 1522.23 224.68 1512.37 214.62 1503.69 205.25 M 1543.99 234.24 C 1531.46 222.17 1519.45 210.08 1503.69 193.93 M 1543.99 234.24 C 1529.57 218.41 1514.53 205.12 1503.69 193.93 M 1555.31 234.24 C 1540.44 221.35 1529.85 209.66 1502.98 181.91 M 1555.31 234.24 C 1542.54 222.3 1530.89 209.13 1502.98 181.91 M 1566.62 234.24 C 1553.27 221.11 1541.48 210.91 1510.76 178.38 M 1566.62 234.24 C 1547.94 216.54 1530.33 197.95 1510.76 178.38 M 1578.64 234.95 C 1561.93 219.08 1543.74 200.72 1522.07 178.38 M 1578.64 234.95 C 1555.53 213.02 1532.47 189.43 1522.07 178.38 M 1589.96 234.95 C 1573.17 215.69 1555.36 201.14 1533.39 178.38 M 1589.96 234.95 C 1569.5 215.79 1552.17 197.58 1533.39 178.38 M 1601.27 234.95 C 1580.17 211.07 1555.81 189.93 1544.7 178.38 M 1601.27 234.95 C 1585.84 218.73 1569.43 202.64 1544.7 178.38 M 1612.58 234.95 C 1595.03 217.18 1577.87 200.87 1556.01 178.38 M 1612.58 234.95 C 1591.88 214.09 1571.62 194.4 1556.01 178.38 M 1623.9 234.95 C 1612.61 223.66 1600.59 210.63 1567.33 178.38 M 1623.9 234.95 C 1608.17 219.38 1590.88 202.61 1567.33 178.38 M 1635.21 234.95 C 1622.22 220.61 1610.05 210.71 1578.64 178.38 M 1635.21 234.95 C 1623.69 222.53 1612 210.77 1578.64 178.38 M 1651.47 239.9 C 1624.84 215.55 1601.1 192.88 1589.96 178.38 M 1651.47 239.9 C 1629.29 217.97 1607.9 196.24 1589.96 178.38 M 1659.25 236.36 C 1647.72 225.16 1634.54 211.47 1601.27 178.38 M 1659.25 236.36 C 1642.29 219.69 1623.6 200.72 1601.27 178.38 M 1664.2 230 C 1650.83 217.91 1638.79 205.27 1612.58 178.38 M 1664.2 230 C 1645.37 210.47 1625.83 190.15 1612.58 178.38 M 1664.2 218.68 C 1648.15 202.78 1636.6 187.66 1624.6 179.08 M 1664.2 218.68 C 1650.93 204.26 1636.04 189.83 1624.6 179.08 M 1664.91 208.08 C 1658.03 202.47 1652.31 192.68 1635.92 179.08 M 1664.91 208.08 C 1657.73 201.8 1651.23 196.07 1635.92 179.08 M 1664.91 196.76 C 1659.19 188.14 1651.73 181.71 1647.23 179.08 M 1664.91 196.76 C 1659.23 190.67 1653.2 185.33 1647.23 179.08" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1509 180 M 1509 180 C 1542.38 182.99 1575.7 180.34 1651 180 M 1509 180 C 1544.31 179.89 1581.21 178.95 1651 180 M 1651 180 C 1658.06 181.79 1658.09 181.27 1660 189 M 1651 180 C 1655.52 180.03 1661.96 183.75 1660 189 M 1660 189 C 1658.34 197.76 1661.82 208.72 1660 231 M 1660 189 C 1659.51 205.48 1659.81 219.76 1660 231 M 1660 231 C 1661.86 235.33 1658.77 238.03 1651 240 M 1660 231 C 1660.62 237.7 1655.12 238.2 1651 240 M 1651 240 C 1616.25 242.34 1582.39 239.9 1509 240 M 1651 240 C 1599.12 238.34 1546.64 239.24 1509 240 M 1509 240 C 1504.96 241.43 1499.73 236.23 1500 231 M 1509 240 C 1502.55 241.86 1500.06 237.97 1500 231 M 1500 231 C 1501.79 214.04 1501.27 199.89 1500 189 M 1500 231 C 1499.35 214.6 1500.54 200.56 1500 189 M 1500 189 C 1500.99 184.49 1502.44 179.16 1509 180 M 1500 189 C 1500.93 182.52 1501.56 180.02 1509 180" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1500" cy="200" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1480" y="180" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1497.11 201.92 C 1497.11 201.92 1497.11 201.92 1497.11 201.92 M 1497.11 201.92 C 1497.11 201.92 1497.11 201.92 1497.11 201.92" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1490" cy="200" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1470" y="180" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1487.31 203.24 C 1487.31 203.24 1487.31 203.24 1487.31 203.24 M 1487.31 203.24 C 1487.31 203.24 1487.31 203.24 1487.31 203.24" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1390" y="100" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 110px; margin-left: 1435px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
scrollTop 1050
</div>
</div>
</div>
</foreignObject>
<text x="1435" y="114" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
scrollTop 1050
</text>
</switch>
</g>
<path d="M 1340 244.71 L 1763.64 269.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1768.88 269.93 L 1761.69 273.02 L 1763.64 269.63 L 1762.1 266.03 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1370" y="230" width="70" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 240px; margin-left: 1405px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Adjust top
</div>
</div>
</div>
</foreignObject>
<text x="1405" y="244" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Adjust top
</text>
</switch>
</g>
<path d="M 720 120 L 954.09 110.13" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 959.33 109.91 L 952.49 113.7 L 954.09 110.13 L 952.19 106.71 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="850" y="98" width="100" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 108px; margin-left: 900px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
UpdateScrollTop
</div>
</div>
</div>
</foreignObject>
<text x="900" y="112" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
UpdateScrollTop
</text>
</switch>
</g>
<rect x="0" y="270" width="1950" height="80" fill="none" stroke="#006666" stroke-dasharray="1 1" pointer-events="all"/>
<rect x="2" y="272" width="1946" height="76" fill="none" stroke="#006666" stroke-dasharray="1 1" pointer-events="all"/>
<rect x="640" y="20" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 30px; margin-left: 700px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Webview top -1000
</div>
</div>
</div>
</foreignObject>
<text x="700" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Webview top -1000
</text>
</switch>
</g>
<rect x="1170" y="0" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 10px; margin-left: 1230px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Webview top -1000
</div>
</div>
</div>
</foreignObject>
<text x="1230" y="14" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Webview top -1000
</text>
</switch>
</g>
<rect x="1600" y="0" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 10px; margin-left: 1660px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Webview top -1000
</div>
</div>
</div>
</foreignObject>
<text x="1660" y="14" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Webview top -1000
</text>
</switch>
</g>
<rect x="1640" y="620" width="180" height="400" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="1642" y="622" width="176" height="396" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="1650" y="830" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1651.85 868.85 C 1651.85 868.85 1651.85 868.85 1651.85 868.85 M 1651.85 868.85 C 1651.85 868.85 1651.85 868.85 1651.85 868.85 M 1658.92 864.6 C 1657.54 862.45 1655.46 861.34 1653.97 859.66 M 1658.92 864.6 C 1658.03 863.3 1656.52 862.3 1653.97 859.66 M 1670.23 864.6 C 1667.94 861.46 1662.91 855.96 1653.97 848.34 M 1670.23 864.6 C 1664.72 859.05 1660.19 854.77 1653.97 848.34 M 1681.55 864.6 C 1672.47 858.89 1669.21 851.52 1651.14 834.2 M 1681.55 864.6 C 1673.06 856.56 1665.87 848.83 1651.14 834.2 M 1692.86 864.6 C 1683.92 857.18 1675.86 848.21 1656.8 828.54 M 1692.86 864.6 C 1680.14 851.98 1668.33 839.31 1656.8 828.54 M 1704.17 864.6 C 1691.86 851.01 1676.33 838 1668.82 829.25 M 1704.17 864.6 C 1690.13 851.16 1676.91 839.32 1668.82 829.25 M 1715.49 864.6 C 1704.2 851.81 1692.13 841.37 1680.13 829.25 M 1715.49 864.6 C 1707.64 857.76 1700.85 849.1 1680.13 829.25 M 1726.8 864.6 C 1712.3 851.91 1700.17 837.79 1691.45 829.25 M 1726.8 864.6 C 1713.94 853.93 1702.56 841.86 1691.45 829.25 M 1738.11 864.6 C 1731.32 856.95 1719.2 844.23 1702.76 829.25 M 1738.11 864.6 C 1728.58 854.21 1717.89 844.31 1702.76 829.25 M 1749.43 864.6 C 1741.13 857.61 1734.66 850.76 1714.07 829.25 M 1749.43 864.6 C 1735.6 850.85 1722.12 837.74 1714.07 829.25 M 1760.74 864.6 C 1748.25 852.2 1731.34 837.97 1725.39 829.25 M 1760.74 864.6 C 1752.14 856.25 1743.78 847.66 1725.39 829.25 M 1772.06 864.6 C 1763.58 856.24 1754.6 845.9 1736.7 829.25 M 1772.06 864.6 C 1763.64 854.95 1752.42 846.39 1736.7 829.25 M 1783.37 864.6 C 1768.21 848.89 1754.95 839.38 1748.01 829.25 M 1783.37 864.6 C 1771.25 853.84 1760.11 841.35 1748.01 829.25 M 1794.68 864.6 C 1783.98 850.82 1770.62 837.8 1759.33 829.25 M 1794.68 864.6 C 1782.4 852.71 1768.01 839.6 1759.33 829.25 M 1809.53 868.14 C 1800.14 861.43 1794.46 852.64 1770.64 829.25 M 1809.53 868.14 C 1796.6 856.77 1785.64 843.85 1770.64 829.25 M 1814.48 861.78 C 1805.8 854.44 1796.24 844.9 1781.96 829.25 M 1814.48 861.78 C 1808.19 854.7 1800.94 847.81 1781.96 829.25 M 1814.48 850.46 C 1808.36 844 1801.14 835.2 1793.27 829.25 M 1814.48 850.46 C 1808.03 844.19 1801.97 837.71 1793.27 829.25 M 1810.95 835.61 C 1809.6 834.27 1808.29 832.48 1804.58 829.25 M 1810.95 835.61 C 1808.57 832.82 1806.48 831.18 1804.58 829.25" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1656 830 M 1656 830 C 1696.07 827.7 1736.65 826.85 1804 830 M 1656 830 C 1711.88 830 1765.11 830.07 1804 830 M 1804 830 C 1808.19 831.11 1811.71 831.01 1810 836 M 1804 830 C 1808.07 830.68 1807.75 833.61 1810 836 M 1810 836 C 1808.95 845.24 1809.85 853.11 1810 864 M 1810 836 C 1810.31 843.94 1810.07 850.76 1810 864 M 1810 864 C 1809.05 869.55 1808.27 870.41 1804 870 M 1810 864 C 1809.41 868.59 1806.05 870.9 1804 870 M 1804 870 C 1768.42 869.13 1734.9 870.23 1656 870 M 1804 870 C 1766.21 869.16 1726.69 870.53 1656 870 M 1656 870 C 1651.69 870.09 1650.75 867.55 1650 864 M 1656 870 C 1649.86 871.59 1648.12 866.58 1650 864 M 1650 864 C 1648.83 853.47 1649.36 846.26 1650 836 M 1650 864 C 1649.34 853.53 1650.61 842.48 1650 836 M 1650 836 C 1651.09 831.98 1650.58 828.13 1656 830 M 1650 836 C 1650.73 833.86 1650.48 828.66 1656 830" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1650" y="720" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1651.69 758.69 C 1651.69 758.69 1651.69 758.69 1651.69 758.69 M 1651.69 758.69 C 1651.69 758.69 1651.69 758.69 1651.69 758.69 M 1658.76 754.45 C 1657.36 752.34 1655.04 750.9 1653.81 749.5 M 1658.76 754.45 C 1657.26 753.18 1655.38 751.61 1653.81 749.5 M 1670.08 754.45 C 1667.18 752.93 1662.42 749.17 1653.81 738.19 M 1670.08 754.45 C 1667.43 751.34 1663.04 748.21 1653.81 738.19 M 1681.39 754.45 C 1673.22 745.44 1662.97 735.18 1651.69 724.75 M 1681.39 754.45 C 1675.01 748.62 1669.65 741.55 1651.69 724.75 M 1692.71 754.45 C 1682.66 744.28 1669.91 731.59 1657.35 719.1 M 1692.71 754.45 C 1681.68 742.95 1670.22 731.23 1657.35 719.1 M 1704.02 754.45 C 1693.25 744.4 1685 732.78 1668.66 719.1 M 1704.02 754.45 C 1690.84 740.58 1677.65 728.29 1668.66 719.1 M 1715.33 754.45 C 1703.21 742.81 1690.72 730.35 1679.98 719.1 M 1715.33 754.45 C 1700.59 739.87 1686.24 726.18 1679.98 719.1 M 1726.65 754.45 C 1713.97 743.14 1700.31 728.93 1691.29 719.1 M 1726.65 754.45 C 1718.31 745.74 1708.14 737.02 1691.29 719.1 M 1737.96 754.45 C 1729.37 744.25 1719.32 737.1 1702.6 719.1 M 1737.96 754.45 C 1727.78 743.76 1716.56 733.83 1702.6 719.1 M 1749.27 754.45 C 1741.33 744.56 1731.76 736.37 1713.92 719.1 M 1749.27 754.45 C 1737.22 742.81 1725.22 730.53 1713.92 719.1 M 1760.59 754.45 C 1750.72 745.33 1743.73 734.99 1725.23 719.1 M 1760.59 754.45 C 1748.92 742.18 1737.16 730.32 1725.23 719.1 M 1771.9 754.45 C 1760.47 744.61 1750.92 736.47 1736.55 719.1 M 1771.9 754.45 C 1761.24 743.01 1750.76 733.02 1736.55 719.1 M 1783.21 754.45 C 1772.29 742.6 1760.74 730.26 1747.86 719.1 M 1783.21 754.45 C 1771.77 742.97 1762.46 733.41 1747.86 719.1 M 1794.53 754.45 C 1780.22 740.83 1768.63 725.74 1759.17 719.1 M 1794.53 754.45 C 1782.76 743.7 1774.12 732.56 1759.17 719.1 M 1809.38 757.99 C 1794.1 743.48 1783.59 731.55 1770.49 719.1 M 1809.38 757.99 C 1799.23 746.81 1788.65 735.35 1770.49 719.1 M 1814.33 751.62 C 1803.98 739.71 1791.32 728.68 1781.8 719.1 M 1814.33 751.62 C 1805.67 743.46 1798.27 737.6 1781.8 719.1 M 1814.33 740.31 C 1809.69 735.16 1806.06 732.26 1793.11 719.1 M 1814.33 740.31 C 1809.3 735.9 1806.04 731.9 1793.11 719.1 M 1810.79 725.46 C 1807.93 724.29 1807.63 721.18 1804.43 719.1 M 1810.79 725.46 C 1809.22 723.89 1807.32 722.15 1804.43 719.1" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1656 720 M 1656 720 C 1686.97 718.84 1722.3 719.02 1804 720 M 1656 720 C 1696.66 720.88 1739 720.31 1804 720 M 1804 720 C 1809 719.01 1810.83 722.01 1810 726 M 1804 720 C 1809.53 720.94 1807.72 720.78 1810 726 M 1810 726 C 1811.53 733.97 1808.87 744.59 1810 754 M 1810 726 C 1809.48 732.95 1809.67 739.88 1810 754 M 1810 754 C 1811.32 757.42 1806.4 758.04 1804 760 M 1810 754 C 1808.73 756.18 1806.83 760.59 1804 760 M 1804 760 C 1757.94 759.98 1711.32 761.11 1656 760 M 1804 760 C 1768.92 760.39 1733.25 760.51 1656 760 M 1656 760 C 1650.74 761.99 1651.5 758.8 1650 754 M 1656 760 C 1654.01 761.23 1648.52 760.02 1650 754 M 1650 754 C 1649.89 746.01 1649.61 741.42 1650 726 M 1650 754 C 1649.89 745.4 1650.6 735.94 1650 726 M 1650 726 C 1651.79 721.21 1651.04 720.8 1656 720 M 1650 726 C 1649.93 723.66 1651.14 721.95 1656 720" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1520" y="680" width="200" height="280" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1522" y="682" width="196" height="276" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1520" y="650" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 660px; margin-left: 1580px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="1580" y="664" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<rect x="1540" y="880" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1541.44 918.44 C 1541.44 918.44 1541.44 918.44 1541.44 918.44 M 1541.44 918.44 C 1541.44 918.44 1541.44 918.44 1541.44 918.44 M 1548.51 914.2 C 1547.39 913.56 1547.17 912.73 1544.27 909.96 M 1548.51 914.2 C 1547.42 913.29 1546.33 912.06 1544.27 909.96 M 1559.83 914.2 C 1553.98 910.98 1549.97 906.55 1544.27 898.64 M 1559.83 914.2 C 1555.16 909.84 1550.08 903.61 1544.27 898.64 M 1571.14 914.2 C 1561.87 904.61 1548.55 895.12 1541.44 884.5 M 1571.14 914.2 C 1563.42 906.64 1556.94 899.48 1541.44 884.5 M 1582.45 914.2 C 1568.75 900.54 1557.44 888.14 1547.1 878.84 M 1582.45 914.2 C 1575.72 907.19 1566.08 897.82 1547.1 878.84 M 1593.77 914.2 C 1581.23 900.89 1570.12 891.07 1558.41 878.84 M 1593.77 914.2 C 1584.49 904.52 1576.17 895.12 1558.41 878.84 M 1605.08 914.2 C 1592.11 902.49 1579.28 889.29 1569.73 878.84 M 1605.08 914.2 C 1591.95 902.05 1578.95 889.41 1569.73 878.84 M 1616.4 914.2 C 1604.12 902.22 1588.81 889.82 1581.04 878.84 M 1616.4 914.2 C 1603.46 901.65 1590.72 888.47 1581.04 878.84 M 1627.71 914.2 C 1618.79 906.94 1613.03 901.48 1592.35 878.84 M 1627.71 914.2 C 1620.31 905.45 1612.77 897.27 1592.35 878.84 M 1639.73 914.91 C 1628.76 905.51 1619.77 897.77 1603.67 878.84 M 1639.73 914.91 C 1632.72 906.88 1624.48 899.1 1603.67 878.84 M 1651.04 914.91 C 1644.39 908.1 1632.4 895.57 1614.98 878.84 M 1651.04 914.91 C 1638.8 902.86 1626.33 889.85 1614.98 878.84 M 1662.36 914.91 C 1650.88 903.26 1639.48 888.74 1626.29 878.84 M 1662.36 914.91 C 1652.3 904.02 1642.32 894.87 1626.29 878.84 M 1673.67 914.91 C 1665.33 906.57 1652.61 897.54 1637.61 878.84 M 1673.67 914.91 C 1662.84 902.81 1650.18 891.05 1637.61 878.84 M 1684.98 914.91 C 1672.04 899.12 1654.49 887.92 1648.92 878.84 M 1684.98 914.91 C 1669.42 901.24 1656.87 886.59 1648.92 878.84 M 1699.13 917.73 C 1691.64 910.4 1681.41 899.7 1660.24 878.84 M 1699.13 917.73 C 1688.54 906.51 1678.18 898.06 1660.24 878.84 M 1704.78 912.08 C 1695.97 903.5 1685.95 895.7 1671.55 878.84 M 1704.78 912.08 C 1692.74 900.76 1681.29 888.2 1671.55 878.84 M 1704.78 900.76 C 1702.1 896.98 1696.59 893.05 1683.57 879.55 M 1704.78 900.76 C 1696.87 893.8 1691.35 886.97 1683.57 879.55 M 1700.54 885.21 C 1699.12 883.62 1697.96 881.29 1694.88 879.55 M 1700.54 885.21 C 1698.35 883.54 1696.27 881.06 1694.88 879.55" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1546 880 M 1546 880 C 1592.6 878.6 1640.08 878.57 1694 880 M 1546 880 C 1602.26 878.92 1659.33 878.44 1694 880 M 1694 880 C 1697.66 880.18 1701.62 880.33 1700 886 M 1694 880 C 1695.76 881.81 1700.85 882.9 1700 886 M 1700 886 C 1700.56 894.68 1699.96 904.17 1700 914 M 1700 886 C 1699.16 892.16 1699.87 899.09 1700 914 M 1700 914 C 1701.45 917.5 1699.96 921.17 1694 920 M 1700 914 C 1698.64 916.69 1697.77 922.02 1694 920 M 1694 920 C 1643.96 922.83 1596.66 919.79 1546 920 M 1694 920 C 1664.94 921.28 1635.09 920.87 1546 920 M 1546 920 C 1542.61 921.89 1541.6 917.16 1540 914 M 1546 920 C 1543.53 918.04 1539.62 918.81 1540 914 M 1540 914 C 1539.59 903.88 1539.75 895.36 1540 886 M 1540 914 C 1539.63 904.38 1540.36 894.86 1540 886 M 1540 886 C 1538.43 881.29 1540.19 879.7 1546 880 M 1540 886 C 1541.07 881.33 1540.6 882.19 1546 880" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1540" y="760" width="160" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1541.99 817.49 C 1541.99 817.49 1541.99 817.49 1541.99 817.49 M 1541.99 817.49 C 1541.99 817.49 1541.99 817.49 1541.99 817.49 M 1550.47 814.66 C 1548.21 812.39 1547.03 810.09 1543.4 807.59 M 1550.47 814.66 C 1549.43 813.09 1547.24 811.11 1543.4 807.59 M 1561.79 814.66 C 1558.9 808.16 1552.77 805.12 1543.4 796.27 M 1561.79 814.66 C 1554.81 808.79 1549.07 801.76 1543.4 796.27 M 1573.1 814.66 C 1564.3 806.86 1557.28 796.93 1543.4 784.96 M 1573.1 814.66 C 1567.18 808.51 1560.3 802.62 1543.4 784.96 M 1584.41 814.66 C 1575.92 805.95 1568.56 798.46 1543.4 773.65 M 1584.41 814.66 C 1571.28 802.47 1558.4 788.7 1543.4 773.65 M 1595.73 814.66 C 1584.81 803.71 1570.77 792.51 1542.69 761.63 M 1595.73 814.66 C 1584.23 802.43 1572.18 790.64 1542.69 761.63 M 1607.04 814.66 C 1593.44 799.32 1581.4 788.12 1550.47 758.09 M 1607.04 814.66 C 1586.55 795.19 1567.08 774.65 1550.47 758.09 M 1618.35 814.66 C 1598.72 792.25 1577.76 771.36 1561.79 758.09 M 1618.35 814.66 C 1599.11 796.79 1582.22 776.83 1561.79 758.09 M 1629.67 814.66 C 1616.19 801.37 1600.06 787.32 1573.1 758.09 M 1629.67 814.66 C 1609.06 795.48 1590.17 775.97 1573.1 758.09 M 1640.98 814.66 C 1619 793.8 1597.38 768.06 1584.41 758.09 M 1640.98 814.66 C 1628.14 800.71 1613.17 788.45 1584.41 758.09 M 1652.3 814.66 C 1638.53 800.92 1625.55 785.67 1596.43 758.8 M 1652.3 814.66 C 1631.81 794.65 1612.3 775.8 1596.43 758.8 M 1663.61 814.66 C 1646.93 797.92 1630.09 780.44 1607.75 758.8 M 1663.61 814.66 C 1647.6 798.92 1630.94 782.55 1607.75 758.8 M 1674.92 814.66 C 1656.97 796.81 1640.75 780.44 1619.06 758.8 M 1674.92 814.66 C 1651.81 792.94 1629.88 770.97 1619.06 758.8 M 1691.19 819.61 C 1675.89 802.21 1657.25 785.2 1630.38 758.8 M 1691.19 819.61 C 1675.7 804.26 1663.37 791.29 1630.38 758.8 M 1698.96 816.07 C 1685.38 801.32 1670.96 789.43 1641.69 758.8 M 1698.96 816.07 C 1681.24 796.89 1661.72 778.87 1641.69 758.8 M 1704.62 810.42 C 1685.77 792.27 1665.37 771.61 1653 758.8 M 1704.62 810.42 C 1690.59 797.4 1676.67 782.16 1653 758.8 M 1704.62 799.1 C 1690.68 783.55 1679.36 770.09 1664.32 758.8 M 1704.62 799.1 C 1691.07 787.69 1678.95 774.05 1664.32 758.8 M 1704.62 787.79 C 1696.36 779.03 1689.69 769.18 1675.63 758.8 M 1704.62 787.79 C 1697.21 781.66 1690.04 774.37 1675.63 758.8 M 1704.62 776.48 C 1699.79 769.29 1692.06 765.52 1686.94 758.8 M 1704.62 776.48 C 1698.37 771.11 1691.24 763.08 1686.94 758.8" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1549 760 M 1549 760 C 1604 758.85 1661.3 762.2 1691 760 M 1549 760 C 1600.7 760.4 1654.21 759.11 1691 760 M 1691 760 C 1695.28 759.61 1701.33 763.32 1700 769 M 1691 760 C 1697.23 758.26 1699.18 764.97 1700 769 M 1700 769 C 1701.06 777.93 1701.85 788.02 1700 811 M 1700 769 C 1699.52 783.43 1699.48 798.44 1700 811 M 1700 811 C 1700.93 816.1 1696.43 819.41 1691 820 M 1700 811 C 1701.97 818.64 1695.88 821.81 1691 820 M 1691 820 C 1658.52 821.02 1627.54 822.49 1549 820 M 1691 820 C 1655.34 819.96 1619.48 818.11 1549 820 M 1549 820 C 1544.67 820.46 1539.44 817.23 1540 811 M 1549 820 C 1545.28 820.95 1537.83 816.8 1540 811 M 1540 811 C 1537.59 802.5 1541 790.11 1540 769 M 1540 811 C 1540.2 800.79 1538.83 787.74 1540 769 M 1540 769 C 1539.16 762.44 1544.27 761.27 1549 760 M 1540 769 C 1542.02 762.23 1542.63 758.48 1549 760" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1540" cy="780" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1520" y="760" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1537.16 784.13 C 1537.16 784.13 1537.16 784.13 1537.16 784.13 M 1537.16 784.13 C 1537.16 784.13 1537.16 784.13 1537.16 784.13 M 1544.94 780.6 C 1543.63 777.88 1541.48 776.59 1539.28 774.94 M 1544.94 780.6 C 1542.45 778.52 1540.7 776.19 1539.28 774.94" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1530" cy="780" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1510" y="760" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1528.03 783.36 C 1528.03 783.36 1528.03 783.36 1528.03 783.36 M 1528.03 783.36 C 1528.03 783.36 1528.03 783.36 1528.03 783.36" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1430" y="680" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 690px; margin-left: 1475px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
scrollTop 1050
</div>
</div>
</div>
</foreignObject>
<text x="1475" y="694" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
scrollTop 1050
</text>
</switch>
</g>
<rect x="1645" y="580" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 590px; margin-left: 1700px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Webview top -950
</div>
</div>
</div>
</foreignObject>
<text x="1700" y="594" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Webview top -950
</text>
</switch>
</g>
<rect x="2080" y="620" width="180" height="400" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="2082" y="622" width="176" height="396" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<rect x="2090" y="830" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 2091.76 868.76 C 2091.76 868.76 2091.76 868.76 2091.76 868.76 M 2091.76 868.76 C 2091.76 868.76 2091.76 868.76 2091.76 868.76 M 2098.83 864.52 C 2097.09 863.66 2096.73 861.6 2093.88 859.57 M 2098.83 864.52 C 2097.22 862.69 2095.08 860.71 2093.88 859.57 M 2110.14 864.52 C 2105.85 859.54 2097.99 854.5 2093.88 848.25 M 2110.14 864.52 C 2104.29 858.47 2098.28 852.55 2093.88 848.25 M 2121.46 864.52 C 2114.92 856.28 2106.42 848.32 2091.76 834.82 M 2121.46 864.52 C 2110.89 852.89 2101.17 843.09 2091.76 834.82 M 2132.77 864.52 C 2123.95 855.29 2117.75 849.34 2097.41 829.16 M 2132.77 864.52 C 2121.88 853.48 2112.08 843.51 2097.41 829.16 M 2144.08 864.52 C 2133.1 851.34 2118.95 840.74 2108.73 829.16 M 2144.08 864.52 C 2130.58 849.92 2116.82 836.03 2108.73 829.16 M 2155.4 864.52 C 2143.33 852.5 2134.64 841.46 2120.04 829.16 M 2155.4 864.52 C 2146.28 856.83 2139.32 848.16 2120.04 829.16 M 2166.71 864.52 C 2154.27 853.3 2144.9 843.3 2131.36 829.16 M 2166.71 864.52 C 2157.2 854.11 2148.41 844.82 2131.36 829.16 M 2178.02 864.52 C 2167.95 852.76 2157.43 845.4 2142.67 829.16 M 2178.02 864.52 C 2167.49 854.43 2158.92 844 2142.67 829.16 M 2189.34 864.52 C 2182.87 856.44 2172.65 847.36 2153.98 829.16 M 2189.34 864.52 C 2178.23 854.06 2168.4 843.22 2153.98 829.16 M 2200.65 864.52 C 2190.9 854.65 2182.32 849.04 2165.3 829.16 M 2200.65 864.52 C 2191.33 854.55 2180.75 845.01 2165.3 829.16 M 2211.97 864.52 C 2206.25 855.56 2198.75 848.07 2176.61 829.16 M 2211.97 864.52 C 2203.57 856.49 2194.25 846.65 2176.61 829.16 M 2223.28 864.52 C 2208.7 853.01 2194.49 836.01 2187.92 829.16 M 2223.28 864.52 C 2216.2 857.1 2206.77 847.35 2187.92 829.16 M 2234.59 864.52 C 2221.78 852.43 2209.07 836.86 2199.24 829.16 M 2234.59 864.52 C 2221.46 851.16 2209.39 838.27 2199.24 829.16 M 2249.44 868.05 C 2238.9 858.16 2229.53 848.82 2210.55 829.16 M 2249.44 868.05 C 2240.17 858.9 2231.9 850.35 2210.55 829.16 M 2254.39 861.69 C 2245.63 852.52 2234.12 840.71 2221.87 829.16 M 2254.39 861.69 C 2248.07 855.31 2241.45 847.91 2221.87 829.16 M 2254.39 850.37 C 2248.33 843.79 2239.19 834.25 2233.18 829.16 M 2254.39 850.37 C 2247.71 842.92 2241.79 836.83 2233.18 829.16 M 2250.86 835.52 C 2248.99 833.35 2246.76 831.5 2244.49 829.16 M 2250.86 835.52 C 2248.21 832.69 2245.9 830.29 2244.49 829.16" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 2096 830 M 2096 830 C 2144.7 830.71 2188.41 829.41 2244 830 M 2096 830 C 2138.23 829.59 2180.52 829.54 2244 830 M 2244 830 C 2249.31 830.47 2251.48 833.37 2250 836 M 2244 830 C 2246.2 829.71 2250.58 830.06 2250 836 M 2250 836 C 2251.19 844.05 2249.31 850.39 2250 864 M 2250 836 C 2249.32 844.54 2249.35 853.71 2250 864 M 2250 864 C 2251.62 867.02 2247.52 869.04 2244 870 M 2250 864 C 2252.16 869.54 2246.5 871.74 2244 870 M 2244 870 C 2206.52 868.06 2168.72 869.62 2096 870 M 2244 870 C 2202.29 870.11 2162.7 868.81 2096 870 M 2096 870 C 2093.09 868 2088.8 866.6 2090 864 M 2096 870 C 2094.06 872.28 2091.73 870.1 2090 864 M 2090 864 C 2091.47 852.53 2088.72 840.25 2090 836 M 2090 864 C 2090.6 857.17 2090.18 851 2090 836 M 2090 836 C 2091.92 833.52 2093.65 830.3 2096 830 M 2090 836 C 2090.63 833.32 2093.53 828.86 2096 830" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="2090" y="700" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 2091.7 738.7 C 2091.7 738.7 2091.7 738.7 2091.7 738.7 M 2091.7 738.7 C 2091.7 738.7 2091.7 738.7 2091.7 738.7 M 2098.77 734.46 C 2096.67 732.76 2095.74 731.47 2093.83 729.51 M 2098.77 734.46 C 2097.01 732.7 2095.3 730.77 2093.83 729.51 M 2110.09 734.46 C 2105.83 731.27 2100.57 724.35 2093.83 718.2 M 2110.09 734.46 C 2105.86 730.85 2103.46 728.4 2093.83 718.2 M 2121.4 734.46 C 2115.34 728.01 2109.14 723.62 2091.7 704.76 M 2121.4 734.46 C 2112.64 724.25 2102.52 715.72 2091.7 704.76 M 2132.72 734.46 C 2122.51 724.38 2110.43 713.5 2097.36 699.11 M 2132.72 734.46 C 2119.2 719.3 2105.97 706.74 2097.36 699.11 M 2144.03 734.46 C 2134.74 727.58 2125.69 719.63 2108.67 699.11 M 2144.03 734.46 C 2131.17 721.26 2119.69 709 2108.67 699.11 M 2155.34 734.46 C 2140.63 720.77 2126.81 705.8 2119.99 699.11 M 2155.34 734.46 C 2147.62 726.92 2139.78 717.93 2119.99 699.11 M 2166.66 734.46 C 2154.58 724.6 2143.33 709.87 2131.3 699.11 M 2166.66 734.46 C 2157.73 725.56 2149.78 716.48 2131.3 699.11 M 2177.97 734.46 C 2164.96 722.9 2153.51 712.41 2142.62 699.11 M 2177.97 734.46 C 2164.31 721.21 2151.59 706.65 2142.62 699.11 M 2189.28 734.46 C 2175.82 723.23 2165.14 708.32 2153.93 699.11 M 2189.28 734.46 C 2177.31 722.91 2165.77 710.59 2153.93 699.11 M 2200.6 734.46 C 2193.31 726.52 2184.46 718.91 2165.24 699.11 M 2200.6 734.46 C 2190.03 723.32 2179.28 712.81 2165.24 699.11 M 2211.91 734.46 C 2199.97 723.17 2185.9 707.59 2176.56 699.11 M 2211.91 734.46 C 2203.31 726.02 2194.89 718.53 2176.56 699.11 M 2223.23 734.46 C 2215.38 727.57 2206.9 720.45 2187.87 699.11 M 2223.23 734.46 C 2211.83 724.12 2201.01 714.03 2187.87 699.11 M 2234.54 734.46 C 2225.89 727.32 2218.67 716.52 2199.18 699.11 M 2234.54 734.46 C 2227.3 727.3 2221.11 719.74 2199.18 699.11 M 2249.39 738 C 2237.26 728.98 2228.05 718.79 2210.5 699.11 M 2249.39 738 C 2238.04 726.91 2226.59 714.76 2210.5 699.11 M 2254.34 731.63 C 2245.87 723.14 2241.47 715.97 2221.81 699.11 M 2254.34 731.63 C 2244.36 721.89 2233.63 712.17 2221.81 699.11 M 2254.34 720.32 C 2247.68 712.66 2239.32 708.19 2233.13 699.11 M 2254.34 720.32 C 2248.11 713.81 2241.52 706.86 2233.13 699.11 M 2250.8 705.47 C 2248.75 703.14 2246.8 701.45 2244.44 699.11 M 2250.8 705.47 C 2248.92 703.38 2247.31 702.08 2244.44 699.11" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 2096 700 M 2096 700 C 2148.58 698.6 2200.34 699.9 2244 700 M 2096 700 C 2134.23 700.24 2170.9 700.89 2244 700 M 2244 700 C 2247.53 698.2 2249.08 700.14 2250 706 M 2244 700 C 2246.47 698.46 2251.63 700.77 2250 706 M 2250 706 C 2248.01 717.48 2248.15 727.98 2250 734 M 2250 706 C 2249.89 717.48 2248.75 727.18 2250 734 M 2250 734 C 2249 738.38 2248.71 738.75 2244 740 M 2250 734 C 2252.13 738.17 2249.88 740.68 2244 740 M 2244 740 C 2207.86 740 2169.83 738.83 2096 740 M 2244 740 C 2194.43 740.07 2145.58 741.25 2096 740 M 2096 740 C 2091.05 740.64 2088.83 737.39 2090 734 M 2096 740 C 2092.36 741.22 2089.03 738.17 2090 734 M 2090 734 C 2090.04 725.56 2091.43 717.03 2090 706 M 2090 734 C 2090.04 728.17 2090.95 721.97 2090 706 M 2090 706 C 2088.13 702.22 2092.04 698.61 2096 700 M 2090 706 C 2091.01 701.01 2093.35 700.47 2096 700" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1960" y="680" width="200" height="280" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1962" y="682" width="196" height="276" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
<rect x="1960" y="650" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 660px; margin-left: 2020px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="2020" y="664" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<rect x="1980" y="880" width="160" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1981.35 918.35 C 1981.35 918.35 1981.35 918.35 1981.35 918.35 M 1981.35 918.35 C 1981.35 918.35 1981.35 918.35 1981.35 918.35 M 1988.42 914.11 C 1987.34 912.54 1985.35 911.24 1984.18 909.87 M 1988.42 914.11 C 1986.72 912.66 1985.68 911.2 1984.18 909.87 M 1999.74 914.11 C 1995.64 909.13 1988.86 901.22 1984.18 898.55 M 1999.74 914.11 C 1994.76 907.3 1988.24 901.47 1984.18 898.55 M 2011.05 914.11 C 2000.14 901.83 1989.44 891.59 1981.35 884.41 M 2011.05 914.11 C 2000.46 902.79 1991.26 893.36 1981.35 884.41 M 2022.36 914.11 C 2012.61 903.19 1998.99 893.64 1987.01 878.75 M 2022.36 914.11 C 2010.14 901.37 1995.22 887.39 1987.01 878.75 M 2033.68 914.11 C 2022.47 905.23 2012.74 893.81 1998.32 878.75 M 2033.68 914.11 C 2024.24 903.28 2013.37 893.83 1998.32 878.75 M 2045.7 914.82 C 2031.7 903.64 2022 889.59 2009.64 878.75 M 2045.7 914.82 C 2038.23 908.05 2031.98 900.32 2009.64 878.75 M 2057.01 914.82 C 2047.3 904.83 2034.55 892.34 2020.95 878.75 M 2057.01 914.82 C 2047.22 904.33 2036.87 893.73 2020.95 878.75 M 2068.33 914.82 C 2059.96 907.29 2051.63 899.04 2032.26 878.75 M 2068.33 914.82 C 2059.77 906.22 2052.19 897.33 2032.26 878.75 M 2079.64 914.82 C 2069.75 904.32 2057 894.33 2043.58 878.75 M 2079.64 914.82 C 2068.19 902.93 2056.46 890.27 2043.58 878.75 M 2090.95 914.82 C 2079.93 903.43 2069.16 892.41 2054.89 878.75 M 2090.95 914.82 C 2077.24 900.41 2062.49 886.4 2054.89 878.75 M 2102.27 914.82 C 2089.57 902.61 2079.69 890.97 2066.2 878.75 M 2102.27 914.82 C 2091.53 904.86 2083.46 896.45 2066.2 878.75 M 2113.58 914.82 C 2101.81 905.99 2092.14 893.46 2077.52 878.75 M 2113.58 914.82 C 2105.86 906.13 2096.98 899.19 2077.52 878.75 M 2124.89 914.82 C 2110.12 900.3 2097.5 886.83 2089.54 879.46 M 2124.89 914.82 C 2117.83 907.05 2110.97 899.98 2089.54 879.46 M 2139.04 917.64 C 2131.33 907.3 2121.57 900.2 2100.85 879.46 M 2139.04 917.64 C 2124.6 903.91 2109.42 888.31 2100.85 879.46 M 2144.69 911.99 C 2131.99 901.76 2124.21 891.88 2112.17 879.46 M 2144.69 911.99 C 2132.88 900.29 2122.3 889.46 2112.17 879.46 M 2144.69 900.67 C 2138.49 896.35 2135.06 891.69 2123.48 879.46 M 2144.69 900.67 C 2136.98 894.53 2129.6 886.09 2123.48 879.46 M 2140.45 885.12 C 2138.44 882.91 2136.47 880.52 2134.79 879.46 M 2140.45 885.12 C 2138.71 882.72 2136.43 881.17 2134.79 879.46" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1986 880 M 1986 880 C 2041.23 881.62 2095.85 881.13 2134 880 M 1986 880 C 2030.61 879.47 2074.74 880.87 2134 880 M 2134 880 C 2138.78 879.54 2141.39 882.69 2140 886 M 2134 880 C 2138.49 880.83 2139.08 883.95 2140 886 M 2140 886 C 2139.36 893.48 2139.99 901.46 2140 914 M 2140 886 C 2140.74 894.76 2139.71 902.04 2140 914 M 2140 914 C 2140.03 918.96 2139.21 919.81 2134 920 M 2140 914 C 2141.39 917.63 2138.22 918.26 2134 920 M 2134 920 C 2082.06 921.77 2030.48 919.17 1986 920 M 2134 920 C 2101.03 920.24 2069.11 921.15 1986 920 M 1986 920 C 1980 919.8 1979.65 916.21 1980 914 M 1986 920 C 1983.12 918.73 1978.64 917.74 1980 914 M 1980 914 C 1978.23 908.54 1979.11 900.55 1980 886 M 1980 914 C 1978.9 904.43 1979.93 894.18 1980 886 M 1980 886 C 1979.26 882.84 1983.26 881.87 1986 880 M 1980 886 C 1980.97 880.79 1983.65 877.8 1986 880" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1980" y="760" width="160" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1981.9 817.4 C 1981.9 817.4 1981.9 817.4 1981.9 817.4 M 1981.9 817.4 C 1981.9 817.4 1981.9 817.4 1981.9 817.4 M 1990.38 814.57 C 1988.19 812.75 1986.06 809.68 1983.31 807.5 M 1990.38 814.57 C 1988.32 812.25 1985.22 809.87 1983.31 807.5 M 2001.7 814.57 C 1996.63 806.39 1987.47 803.61 1983.31 796.18 M 2001.7 814.57 C 1997.57 809.78 1993.92 806.67 1983.31 796.18 M 2013.01 814.57 C 2002.58 804.07 1994.16 793.41 1983.31 784.87 M 2013.01 814.57 C 2004.22 804.65 1994.63 796.51 1983.31 784.87 M 2024.32 814.57 C 2006.94 800.61 1993.21 783.89 1983.31 773.56 M 2024.32 814.57 C 2013.02 803.19 2002.17 792.14 1983.31 773.56 M 2035.64 814.57 C 2016.26 794.25 1993.78 775.63 1982.6 761.54 M 2035.64 814.57 C 2022.42 800.67 2009.36 788.37 1982.6 761.54 M 2046.95 814.57 C 2032.96 800.5 2020.69 789.08 1990.38 758 M 2046.95 814.57 C 2024.57 792.65 2004.22 769.39 1990.38 758 M 2058.27 814.57 C 2043.14 799.13 2026.54 779.95 2001.7 758 M 2058.27 814.57 C 2043.75 800.22 2028.88 784.48 2001.7 758 M 2069.58 814.57 C 2053.45 796.81 2038.45 783.68 2013.72 758.71 M 2069.58 814.57 C 2050.25 795.94 2031.73 776.13 2013.72 758.71 M 2080.89 814.57 C 2066.53 803.59 2055.98 790.43 2025.03 758.71 M 2080.89 814.57 C 2061.51 794.5 2040.91 775.22 2025.03 758.71 M 2092.21 814.57 C 2076.93 799.07 2060 780.17 2036.34 758.71 M 2092.21 814.57 C 2081.16 801.96 2069.43 792.15 2036.34 758.71 M 2103.52 814.57 C 2090.45 801.06 2075.93 783.27 2047.66 758.71 M 2103.52 814.57 C 2088.1 799.05 2073.83 785.88 2047.66 758.71 M 2114.83 814.57 C 2097.34 797.13 2080.08 781.17 2058.97 758.71 M 2114.83 814.57 C 2098.8 799.2 2080.63 782.02 2058.97 758.71 M 2131.1 819.52 C 2113.49 803.82 2099.41 788.16 2070.29 758.71 M 2131.1 819.52 C 2116.85 804.53 2102.68 789.62 2070.29 758.71 M 2138.88 815.98 C 2124.84 801.72 2110.45 788.98 2081.6 758.71 M 2138.88 815.98 C 2125.4 801.45 2110.06 789.28 2081.6 758.71 M 2144.53 810.33 C 2131.74 800.37 2118.5 786.56 2092.91 758.71 M 2144.53 810.33 C 2130.59 796.09 2117.45 782.49 2092.91 758.71 M 2144.53 799.01 C 2130.44 782 2116.35 766.97 2104.23 758.71 M 2144.53 799.01 C 2131.34 786.44 2119.41 775.25 2104.23 758.71 M 2144.53 787.7 C 2134.05 776.85 2124.69 766.22 2115.54 758.71 M 2144.53 787.7 C 2136.46 779.65 2130.58 772.48 2115.54 758.71 M 2144.53 776.39 C 2139.81 770.93 2138.8 769.4 2126.85 758.71 M 2144.53 776.39 C 2139.01 772.07 2135.44 767.46 2126.85 758.71" fill="none" stroke="#1ba1e2" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1989 760 M 1989 760 C 2025.96 761.38 2059.64 760.83 2131 760 M 1989 760 C 2019.08 760.72 2050.5 760.04 2131 760 M 2131 760 C 2135.14 760.89 2139.71 762.36 2140 769 M 2131 760 C 2135.49 760.11 2138.05 763.48 2140 769 M 2140 769 C 2139.17 785.74 2138.14 799.23 2140 811 M 2140 769 C 2139.56 785.36 2141.05 801.1 2140 811 M 2140 811 C 2140.37 816.41 2137.37 818.74 2131 820 M 2140 811 C 2138.11 817.37 2137.02 818.98 2131 820 M 2131 820 C 2087.67 819.28 2048.33 820.24 1989 820 M 2131 820 C 2101.68 819.34 2073.3 819.86 1989 820 M 1989 820 C 1982.85 821.19 1980.41 816.56 1980 811 M 1989 820 C 1983.9 818.81 1981.76 815.34 1980 811 M 1980 811 C 1980.28 800.67 1981.04 789.27 1980 769 M 1980 811 C 1980.74 798.98 1979.12 788.42 1980 769 M 1980 769 C 1980.27 761.69 1982.2 759.96 1989 760 M 1980 769 C 1979.76 760.72 1982.95 760.91 1989 760" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1980" cy="780" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1960" y="760" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1977.47 783.64 C 1977.47 783.64 1977.47 783.64 1977.47 783.64 M 1977.47 783.64 C 1977.47 783.64 1977.47 783.64 1977.47 783.64 M 1985.25 780.11 C 1984.26 778.31 1982.11 777.01 1981.71 776.57 M 1985.25 780.11 C 1984.21 779.12 1982.84 777.59 1981.71 776.57" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<ellipse cx="1970" cy="780" rx="4" ry="4" fill="none" stroke="none" pointer-events="all"/>
<rect x="1950" y="760" width="40" height="40" fill="none" stroke="none" pointer-events="all"/>
<path d="M 1967.33 783.88 C 1967.33 783.88 1967.33 783.88 1967.33 783.88 M 1967.33 783.88 C 1967.33 783.88 1967.33 783.88 1967.33 783.88 M 1974.4 779.64 C 1973.51 778.43 1973.09 778.34 1970.16 775.39 M 1974.4 779.64 C 1973.04 777.81 1971.4 776.37 1970.16 775.39" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1870" y="680" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 690px; margin-left: 1915px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
scrollTop 1050
</div>
</div>
</div>
</foreignObject>
<text x="1915" y="694" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
scrollTop 1050
</text>
</switch>
</g>
<rect x="2085" y="580" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 590px; margin-left: 2140px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Webview top -950
</div>
</div>
</div>
</foreignObject>
<text x="2140" y="594" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Webview top -950
</text>
</switch>
</g>
<path d="M 1810 740 L 2233.64 720.3" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 2238.88 720.05 L 2232.05 723.87 L 2233.64 720.3 L 2231.73 716.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1850" y="710" width="70" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 720px; margin-left: 1885px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Adjust top
</div>
</div>
</div>
</foreignObject>
<text x="1885" y="724" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Adjust top
</text>
</switch>
</g>
<path d="M 1236.72 20 L 1636.45 614.71" fill="none" stroke="#b85450" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1639.38 619.07 L 1632.57 615.21 L 1636.45 614.71 L 1638.38 611.31 Z" fill="#b85450" stroke="#b85450" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1400" y="850" width="960" height="80" fill="none" stroke="#006666" stroke-dasharray="1 1" pointer-events="all"/>
<rect x="1402" y="852" width="956" height="76" fill="none" stroke="#006666" stroke-dasharray="1 1" pointer-events="all"/>
<ellipse cx="50" cy="40" rx="10" ry="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 40px; margin-left: 41px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
1
</div>
</div>
</div>
</foreignObject>
<text x="50" y="44" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
1
</text>
</switch>
</g>
<ellipse cx="530" cy="40" rx="10" ry="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 40px; margin-left: 521px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
2
</div>
</div>
</div>
</foreignObject>
<text x="530" y="44" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
2
</text>
</switch>
</g>
<ellipse cx="1060" cy="40" rx="10" ry="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 40px; margin-left: 1051px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
3
</div>
</div>
</div>
</foreignObject>
<text x="1060" y="44" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
3
</text>
</switch>
</g>
<ellipse cx="1490" cy="40" rx="10" ry="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 40px; margin-left: 1481px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
4
</div>
</div>
</div>
</foreignObject>
<text x="1490" y="44" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
4
</text>
</switch>
</g>
<ellipse cx="1500" cy="630" rx="10" ry="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 630px; margin-left: 1491px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
4'
</div>
</div>
</div>
</foreignObject>
<text x="1500" y="634" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
4'
</text>
</switch>
</g>
<ellipse cx="1940" cy="630" rx="10" ry="10" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 630px; margin-left: 1931px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
5
</div>
</div>
</div>
</foreignObject>
<text x="1940" y="634" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
5
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Viewer does not support full SVG 1.1
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 133 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 59 KiB

View File

@@ -0,0 +1,521 @@
<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="724px" height="1001px" viewBox="-0.5 -0.5 724 1001" content="&lt;mxfile&gt;&lt;diagram id=&quot;n5xL6N_UYSLJ1J9_o0bc&quot; name=&quot;Page-1&quot;&gt;7Vxbc9o4FP41PG7GtnyBxwbS7M603UzT3baPChbgqbFYIRLor1/ZlnyRBChBhgTCQ2Id28L6vqNzk0wPDOfrWwIXs884RmnPc+J1D4x6nhcEgP3NBZtSEPW5YEqSuBS5teA++Y240OHSVRKjZetCinFKk0VbOMZZhsa0JYOE4Kf2ZROctr91AadIEdyPYapKvycxnZXSfuDU8j9RMp2Jb3YdfuYBjn9NCV5l/Pt6HpgUn/L0HIq++PXLGYzxU0MEbnpgSDCm5dF8PURpDq2Arbzv45az1XMTlFGTG7zyhkeYrpB44uK56EZgQWZ4/rBigF4/zRKK7hdwnJ95YsQz2YzOU9Zy2aH63fxxHhGhaN0Q8We5RXiOKNmwS/jZiMPC1cYNefupQQIXzRr4CxnktE+rjuuhswM+ej0S/f1IoJgpCW9mOEOGw1/iFRnzLvg0oJBMEb8qKkV55zshIiiFNHlsa+ghIwbKiL+iLEaEyf5N0NMCE6pAwHik7WHDNJlm7HjMhs3uBdc52wmbSh/4iXkSx/nt1wQtk9/woejKYe0FTjJaPH9w3QtGeV8ripelMci7XlKCf6EhTjGpEbegZZVaCTUbqGpWzeimnnkW9CxQUP+CKXrA+BeTfkqWlMN/ntAHEvKOBnmvI+RdV4G+iykeqVNcuLXjz3GNuh1pzJ5/qjFHr8unuZJTq7zVEZzaYLuJ/4bmCwY8Ok874/n7QXfdrgyNf5RJJx6/ZWnAqWYdcI46aHsD5Lfe5apaK5AvKZDfd66cxsdrd1hywPuQQKseykx5DHA8pfmqgDmC+XLV9KSyXzcpmqPsTCNU2XzpQO8sQnXVxOBVaWB4TA1U46dblJuJ0SaD82TMjngh4Dz1MNgPfWfxumfiUbL4Q17v0ToUNm6y+ZFjeBWI5s/mudGaA1y2Nry1FbgXedoGVIEGKSE70F9VfkNU3EKJgdKJKh5K6QhIsy2QqbTn6jyThGwXwVuJeiWkVFPjUFL2smuRFNXnvpNi1JEvOxyLpBi45AYp4xQul8w5bbGGTVvYMI0HWUPTsPw0HCvUvEZrqGaNQ4KKDN3hl4qcfcn6uoOEhQSyEuyJxmK4nKGYNyZJmtoPGeTEydOEDNpwzZXn4YtihlAB8RvG6QMkClTFKk0BhrM/jG0HWD0PeCNmN/IbJzijDTlf7Wmjy+ShAwduxOTTfG7yL61Wf3bOs2dgL2krCFTsIw30wAbyatntJk4ovgjgg+CEwKsrV/cU0tXyQpQ+BKfDHhhEsM+DvAlOE7WW5Z4SGCeopoBb7+MYdF0tojuDDo6zgAE0C7PgZCsYQA33hjiuA4G9pQZtPUCjHuYlCZ3etjXbTHVtKKS0fFt5vYZCDjT6aKMmAQxK+8a1sa2IHXd+D6QQ11XhBF3ZTzVcqwq8/FJ9nPvKVd5GSAFkWgKFls5KwEBdOFSt7r58c53QH43jRrbJWnWymTf25pqtJaDXVXkD28zRc3NN2dGG3dUTxDddUtyiq113F7f4JhWbw+MWX1OL8T3D+WE9bvFNwuGDvaNGXbYolg0t6ktapNmS6GuUyLehQ97ZwxlpkrXO4NQU2NgVeYBRTAYYs3+jvz8rGF9AsCHVS0NNSN3ZdhlfTfH+WcRl4TOFG7zK6UmyCb5EYqQoMNKYn+6IMdhJ96aXgjzZGr04dNvXkcXQzWSj+p7Q/GJ4kTvqMqRWUya+8nBFipRWW7o5w3qskria7hkB3lUEDrdaQgffiRBZvCBCE2u5ooLdIiKwQ4SaDQgi4iT+ellcCLMtuND5ceBpuAgtEKHmopc6IyR3oHvxRxdN2ah1Bmr6cakstO1SpHsJqDMWdOtJYUo5Ri3ww/9WWJz4o9xt+YFd4LqLdX2SHU3z/4LLBUE5Op944lJ2zZ6q7L289iJYlixepFlW6I5ldV1BwVzNXFq1yjcULkuFzr5cLDGNlqPQvfK9fhC5/O/ubu3FzoHJK1tnVo7ua3yPthxd7a07aEJYyBrFgk69iPOzcUa/oNPYgp2/FtXceNjbve2waN0hkrCx5hUa8/UhUTZt1sQD07esjzRj5UDEeeGUlQsPVYxvf5KGx1nRCAYqe6GpvbW+ohGoWb1qmd52CX6gccxdleBDNTfnV4h4yRnOYDY1eSv17Eq9Ug1+4GkCpq7etQnVXP3s9FzjcDvTc/1SU6/czsL+rYoFjr9yjcxgWir/F2zyow/nrvauo0kHva42uoRqOnipSblMA9CYn6720YZbt+1fHA0DiQZd9TzSFW1t0KDLw2wWR7aavfcySUW4rkofeR0RrqaFX3KP4zkfCZy/uShMItZxhuxjh6dQ7FLYkb5HQUdOSpeEtKbluBp0PfPY8FnI46iTsdji4nwt9ruYzbt32ndtIuyK9khNlkxon0wcZzvt30mSb6x55/15vOteerHEO2vWv/dY1mXq39QEN/8D&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
<defs/>
<g>
<path d="M 70 60 L 110 100 L 70 140 L 30 100 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 170 110 L 170 173.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 170 178.88 L 166.5 171.88 L 170 173.63 L 173.5 171.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="120" y="90" width="100" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 170px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Render Viewport
</div>
</div>
</div>
</foreignObject>
<text x="170" y="104" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Render Viewport
</text>
</switch>
</g>
<rect x="10" y="0" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 10px; margin-left: 70px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Notebook List View
</div>
</div>
</div>
</foreignObject>
<text x="70" y="14" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Notebook List View
</text>
</switch>
</g>
<path d="M 170 260 L 170 333.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 170 338.88 L 166.5 331.88 L 170 333.63 L 173.5 331.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 210 220 L 393.63 220" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 398.88 220 L 391.88 223.5 L 393.63 220 L 391.88 216.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 170 180 L 210 220 L 170 260 L 130 220 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="200" y="180" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 190px; margin-left: 255px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Render Template
</div>
</div>
</div>
</foreignObject>
<text x="255" y="194" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Render Template
</text>
</switch>
</g>
<path d="M 170 420 L 170 533.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 170 538.88 L 166.5 531.88 L 170 533.63 L 173.5 531.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 210 380 L 393.63 380" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 398.88 380 L 391.88 383.5 L 393.63 380 L 391.88 376.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 170 340 L 210 380 L 170 420 L 130 380 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="200" y="340" width="100" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 350px; margin-left: 250px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Render Element
</div>
</div>
</div>
</foreignObject>
<text x="250" y="354" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Render Element
</text>
</switch>
</g>
<path d="M 170 540 L 210 580 L 170 620 L 130 580 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="210" y="540" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 550px; margin-left: 270px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
Get Dynamic Height
</div>
</div>
</div>
</foreignObject>
<text x="270" y="554" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Get Dynamic Height
</text>
</switch>
</g>
<path d="M 170 660 L 170 620" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 80 660 L 170 660" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 80 660 L 80 380" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 80 380 L 123.63 380" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 128.88 380 L 121.88 383.5 L 123.63 380 L 121.88 376.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="400" y="140" width="280" height="160" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 220px; margin-left: 401px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Create Cell Templates/Parts
</div>
</div>
</div>
</foreignObject>
<text x="540" y="224" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Create Cell Templates/Parts
</text>
</switch>
</g>
<rect x="430" y="250" width="70" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 265px; margin-left: 431px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar
</div>
</div>
</div>
</foreignObject>
<text x="465" y="269" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar
</text>
</switch>
</g>
<rect x="510" y="250" width="70" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 265px; margin-left: 511px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Editor
</div>
</div>
</div>
</foreignObject>
<text x="545" y="269" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Editor
</text>
</switch>
</g>
<rect x="590" y="250" width="70" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 265px; margin-left: 591px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Statusbar
</div>
</div>
</div>
</foreignObject>
<text x="625" y="269" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Statusbar
</text>
</switch>
</g>
<rect x="400" y="340" width="280" height="160" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/>
<path d="M 465 390 L 465 403.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 465 408.88 L 461.5 401.88 L 465 403.63 L 468.5 401.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="420" y="370" width="90" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 380px; margin-left: 421px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Code Cell
</div>
</div>
</div>
</foreignObject>
<text x="465" y="384" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Code Cell
</text>
</switch>
</g>
<path d="M 465 410 L 480 425 L 465 440 L 450 425 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="490" y="415" width="100" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 425px; margin-left: 491px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Render Cell Parts
</div>
</div>
</div>
</foreignObject>
<text x="540" y="429" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Render Cell Parts
</text>
</switch>
</g>
<path d="M 210 580 L 393.63 580" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 398.88 580 L 391.88 583.5 L 393.63 580 L 391.88 576.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="400" y="540" width="280" height="160" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/>
<path d="M 460 600 L 460 643.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 460 648.88 L 456.5 641.88 L 460 643.63 L 463.5 641.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 460 560 L 480 580 L 460 600 L 440 580 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 460 650 L 480 670 L 460 690 L 440 670 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="480" y="570" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 580px; margin-left: 481px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
CellPart read DOM
</div>
</div>
</div>
</foreignObject>
<text x="535" y="584" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
CellPart read DOM
</text>
</switch>
</g>
<rect x="490" y="660" width="110" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 670px; margin-left: 491px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Update layout info
</div>
</div>
</div>
</foreignObject>
<text x="545" y="674" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Update layout info
</text>
</switch>
</g>
<path d="M 240 670 L 440 670" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 240 670 L 240 586.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 240 581.12 L 243.5 588.12 L 240 586.37 L 236.5 588.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="490" y="440" width="120" height="32.73" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 456px; margin-left: 491px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.renderCell
</div>
</div>
</div>
</foreignObject>
<text x="550" y="460" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.renderCell
</text>
</switch>
</g>
<rect x="499" y="450" width="131" height="35.73" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 129px; height: 1px; padding-top: 468px; margin-left: 500px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.renderCell
</div>
</div>
</div>
</foreignObject>
<text x="565" y="471" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.renderCell
</text>
</switch>
</g>
<rect x="508" y="460" width="132" height="36" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 130px; height: 1px; padding-top: 478px; margin-left: 509px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.didRenderCell
</div>
</div>
</div>
</foreignObject>
<text x="574" y="482" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.didRenderCell
</text>
</switch>
</g>
<rect x="490" y="590" width="110" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 605px; margin-left: 491px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.renderCell
</div>
</div>
</div>
</foreignObject>
<text x="545" y="609" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.renderCell
</text>
</switch>
</g>
<rect x="499" y="600" width="110" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 615px; margin-left: 500px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.renderCell
</div>
</div>
</div>
</foreignObject>
<text x="554" y="619" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.renderCell
</text>
</switch>
</g>
<rect x="508" y="610" width="110" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 625px; margin-left: 509px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<font style="font-size: 11px">
Toolbar.prepareLayout
</font>
</div>
</div>
</div>
</foreignObject>
<text x="563" y="629" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.prepareLay...
</text>
</switch>
</g>
<path d="M 0 740 L 721.43 740" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
<rect x="400" y="790" width="280" height="210" fill="none" stroke="rgb(0, 0, 0)" stroke-dasharray="3 3" pointer-events="all"/>
<path d="M 460 690 L 459.93 783.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 459.92 788.88 L 456.43 781.88 L 459.93 783.63 L 463.43 781.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 460 850 L 460 883.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 460 888.88 L 456.5 881.88 L 460 883.63 L 463.5 881.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 460 810 L 480 830 L 460 850 L 440 830 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="480" y="820" width="120" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 830px; margin-left: 481px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Cell Layout Change
</div>
</div>
</div>
</foreignObject>
<text x="540" y="834" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Cell Layout Change
</text>
</switch>
</g>
<path d="M 460 890 L 480 910 L 460 930 L 440 910 Z" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
<rect x="480" y="900" width="200" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 910px; margin-left: 481px;">
<div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Cell Part updateInternalLayoutNow
</div>
</div>
</div>
</foreignObject>
<text x="580" y="914" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
Cell Part updateInternalLayoutNow
</text>
</switch>
</g>
<rect x="490" y="930" width="170" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 945px; margin-left: 491px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.renderCell
</div>
</div>
</div>
</foreignObject>
<text x="575" y="949" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.renderCell
</text>
</switch>
</g>
<rect x="499" y="940" width="171" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 169px; height: 1px; padding-top: 955px; margin-left: 500px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Toolbar.renderCell
</div>
</div>
</div>
</foreignObject>
<text x="585" y="959" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.renderCell
</text>
</switch>
</g>
<rect x="508" y="950" width="172" height="30" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 170px; height: 1px; padding-top: 965px; margin-left: 509px;">
<div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<font style="font-size: 11px">
Toolbar.updateInternalLayoutNow
</font>
</div>
</div>
</div>
</foreignObject>
<text x="594" y="969" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
Toolbar.updateInternalLayout...
</text>
</switch>
</g>
<rect x="605" y="790" width="75" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 800px; margin-left: 606px;">
<div data-drawio-colors="color: #00CCCC; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 204, 204); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
Next Frame
</div>
</div>
</div>
</foreignObject>
<text x="643" y="804" fill="#00CCCC" font-family="Helvetica" font-size="12px" text-anchor="middle">
Next Frame
</text>
</switch>
</g>
<rect x="605" y="540" width="75" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 550px; margin-left: 606px;">
<div data-drawio-colors="color: #00CCCC; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 204, 204); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<font color="#009900">
DOM Read
</font>
</div>
</div>
</div>
</foreignObject>
<text x="643" y="554" fill="#00CCCC" font-family="Helvetica" font-size="12px" text-anchor="middle">
DOM Read
</text>
</switch>
</g>
<rect x="605" y="340" width="75" height="20" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 73px; height: 1px; padding-top: 350px; margin-left: 606px;">
<div data-drawio-colors="color: #00CCCC; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 204, 204); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
<font color="#ff0000">
DOM Write
</font>
</div>
</div>
</div>
</foreignObject>
<text x="643" y="354" fill="#00CCCC" font-family="Helvetica" font-size="12px" text-anchor="middle">
DOM Write
</text>
</switch>
</g>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Viewer does not support full SVG 1.1
</text>
</a>
</switch>
</svg>

After

Width:  |  Height:  |  Size: 44 KiB