updates in navigation
This commit is contained in:
parent
299e321a08
commit
c7e31962fd
|
|
@ -6,10 +6,287 @@ important terms:
|
|||
* `Node` - is a core thing. Node itself contains current config and its state
|
||||
* `Chain` - some sequence of nodes. In one chain **only the last one** node can be active
|
||||
|
||||
## Nodes tree
|
||||
## Work explanation
|
||||
|
||||
* Only the last (most deep) `node` can be `RESUMED`
|
||||
* All the `chain`s of resumed `node` will have status `RESUMED`
|
||||
* Only in the `chain` with status `RESUMED` there are `RESUMED` nodes
|
||||
|
||||
??? info Statuses
|
||||
There are 3 statuses:
|
||||
|
||||
* New - Means that Node/Chain is just created (even before constructor) or has been fully destroyed (in context of navigation)
|
||||
* Created - Means that Node/Chain is created or preparing for destroing
|
||||
* Started - Means that Node/Chain is hidden and can be resumed/stopped at any time
|
||||
* Resumed - Means that Node/Chain now active
|
||||
|
||||
In fact node will retrieve 6 changes of statuses:
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
New -.-> Create
|
||||
Create -.-> Created
|
||||
Created -.-> Start -.-> Started
|
||||
Started --> Resume --> Resumed
|
||||
Resumed --> Pause --> Started
|
||||
Started --> Stop --> Created
|
||||
Created --> Destroy
|
||||
Destroy --> New
|
||||
|
||||
DashedLineLegendTitle(Dashed line) -.-> DashedLineLegend(Possible direction before `Created` state)
|
||||
SolidLineLegendTitle(Solid line) --> SolidLineLegend(Possible direction after `Created` state)
|
||||
|
||||
class New navigation-new;
|
||||
class Destroyed navigation-new;
|
||||
class Created navigation-created;
|
||||
class Started navigation-started;
|
||||
class Resumed navigation-resumed;
|
||||
```
|
||||
---
|
||||
|
||||
### Nodes behaviour
|
||||
|
||||
Let's see the next sample:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph Nodes/Chains tree
|
||||
NodeN1(N1)
|
||||
NodeN2(N2)
|
||||
|
||||
class NodeN1 navigation-started;
|
||||
class NodeN2 navigation-resumed;
|
||||
|
||||
subgraph RootChain
|
||||
direction LR
|
||||
NodeN1 --> NodeN2
|
||||
end
|
||||
|
||||
class RootChain navigation-resumed;
|
||||
end
|
||||
```
|
||||
|
||||
we may say several things about the sample above:
|
||||
|
||||
* N2 is the latest node and it is `RESUMED`
|
||||
* N1 `PAUSED`
|
||||
* RootChain is `RESUMED`
|
||||
|
||||
So, we would like to add new node in the end of stack:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph Nodes/Chains tree
|
||||
NodeN1(N1)
|
||||
NodeN2(N2)
|
||||
NodeN3(N3)
|
||||
|
||||
class NodeN1 navigation-started;
|
||||
class NodeN2 navigation-started;
|
||||
class NodeN3 navigation-resumed;
|
||||
|
||||
subgraph RootChain
|
||||
direction LR
|
||||
NodeN1 --> NodeN2
|
||||
NodeN2 --> NodeN3
|
||||
end
|
||||
|
||||
class RootChain navigation-resumed;
|
||||
end
|
||||
```
|
||||
|
||||
As we can see, N3 became `RESUMED` and N2 `PAUSED`. Let's try to remove N3:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph Nodes/Chains tree
|
||||
NodeN1(N1)
|
||||
NodeN2(N2)
|
||||
|
||||
class NodeN1 navigation-started;
|
||||
class NodeN2 navigation-resumed;
|
||||
|
||||
subgraph RootChain
|
||||
direction LR
|
||||
NodeN1 --> NodeN2
|
||||
end
|
||||
|
||||
class RootChain navigation-resumed;
|
||||
end
|
||||
```
|
||||
|
||||
### Chains behaviour
|
||||
|
||||
So, let's continue with the sample above. Let's imagine, we need to add new subchain for N2 node.
|
||||
Whole tree will look like:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph Nodes/Chains tree
|
||||
direction LR
|
||||
|
||||
NodeN1(N1)
|
||||
NodeN2(N2)
|
||||
NodeN3(N3)
|
||||
|
||||
class NodeN1 navigation-started;
|
||||
class NodeN2 navigation-resumed;
|
||||
class NodeN3 navigation-resumed;
|
||||
|
||||
subgraph RootChain
|
||||
direction LR
|
||||
NodeN1 --> NodeN2
|
||||
NodeN2
|
||||
end
|
||||
|
||||
NodeN2 --> N2Subchain
|
||||
|
||||
subgraph N2Subchain
|
||||
direction LR
|
||||
NodeN3
|
||||
end
|
||||
|
||||
class RootChain navigation-resumed;
|
||||
class N2Subchain navigation-resumed;
|
||||
end
|
||||
```
|
||||
|
||||
Here has been created new N2Subchain with N3 node. Both them resumed because of:
|
||||
|
||||
* N2 is resumed. So, N2Subchain supposed to be resumed
|
||||
* Due to N2Subhain is resumed and N3 is the latest node, it will be resumed too
|
||||
|
||||
We may add new subchain to N1:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph Nodes/Chains tree
|
||||
direction LR
|
||||
NodeN1(N1)
|
||||
NodeN2(N2)
|
||||
NodeN3(N3)
|
||||
NodeN4(N4)
|
||||
|
||||
class NodeN1 navigation-started;
|
||||
class NodeN2 navigation-resumed;
|
||||
class NodeN3 navigation-resumed;
|
||||
class NodeN4 navigation-started;
|
||||
|
||||
subgraph RootChain
|
||||
direction LR
|
||||
NodeN1 --> NodeN2
|
||||
NodeN2
|
||||
end
|
||||
|
||||
NodeN1 --> N1Subchain
|
||||
NodeN2 --> N2Subchain
|
||||
|
||||
subgraph N1Subchain
|
||||
direction LR
|
||||
NodeN4
|
||||
end
|
||||
|
||||
subgraph N2Subchain
|
||||
direction LR
|
||||
NodeN3
|
||||
end
|
||||
|
||||
class RootChain navigation-resumed;
|
||||
|
||||
class N1Subchain navigation-started;
|
||||
class N2Subchain navigation-resumed;
|
||||
end
|
||||
```
|
||||
|
||||
So, it has been added, but:
|
||||
|
||||
* Due to N1 paused state, N1Subchain have inherited it
|
||||
* Due to N1Subhain is paused, all its nodes paused too
|
||||
|
||||
And now we may remove N2 node. This action will trigger next changes:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph Changes
|
||||
subgraph OldNodesChainsTree [Old Nodes/Chains tree]
|
||||
direction TB
|
||||
OldNodeN1(N1)
|
||||
OldNodeN2(N2)
|
||||
OldNodeN3(N3)
|
||||
OldNodeN4(N4)
|
||||
|
||||
class OldNodeN1 navigation-started;
|
||||
class OldNodeN2 navigation-created;
|
||||
class OldNodeN3 navigation-created;
|
||||
class OldNodeN4 navigation-started;
|
||||
|
||||
subgraph OldRootChain [RootChain]
|
||||
direction TB
|
||||
OldNodeN1 --> OldNodeN2
|
||||
OldNodeN2
|
||||
end
|
||||
|
||||
OldNodeN1 --> OldN1Subchain
|
||||
OldNodeN2 --> OldN2Subchain
|
||||
|
||||
subgraph OldN1Subchain [N1Subchain]
|
||||
direction TB
|
||||
OldNodeN4
|
||||
end
|
||||
|
||||
subgraph OldN2Subchain [N2Subchain]
|
||||
direction TB
|
||||
OldNodeN3
|
||||
end
|
||||
|
||||
class OldRootChain navigation-resumed;
|
||||
|
||||
class OldN1Subchain navigation-started;
|
||||
class OldN2Subchain navigation-created;
|
||||
end
|
||||
|
||||
subgraph NewNodesChainsTree [New Nodes/Chains tree]
|
||||
direction TB
|
||||
NewNodeN1(N1)
|
||||
NewNodeN4(N4)
|
||||
|
||||
class NewNodeN1 navigation-resumed;
|
||||
class NewNodeN4 navigation-resumed;
|
||||
|
||||
subgraph NewRootChain [RootChain]
|
||||
direction TB
|
||||
NewNodeN1
|
||||
end
|
||||
|
||||
NewNodeN1 ---> NewN1Subchain
|
||||
|
||||
subgraph NewN1Subchain [N1Subchain]
|
||||
direction TB
|
||||
NewNodeN4
|
||||
end
|
||||
|
||||
class NewRootChain navigation-resumed;
|
||||
|
||||
class NewN1Subchain navigation-resumed;
|
||||
end
|
||||
|
||||
%% OldNodesChainsTree -.-> NewNodesChainsTree
|
||||
OldNodeN1-.->|Become resumed| NewNodeN1
|
||||
OldNodeN4-.->|Become resumed| NewNodeN4
|
||||
|
||||
end
|
||||
```
|
||||
|
||||
What has happened:
|
||||
|
||||
1. We solved to remove N2 node. Status is changing to stopped
|
||||
1. N2Subchain must be stopped
|
||||
2. N3 must be stopped as well
|
||||
|
||||
!!! tip "Stopping in context of navigation means destroying"
|
||||
|
||||
### Large tree sample
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
|
||||
|
|
@ -17,51 +294,41 @@ flowchart TB
|
|||
NodeN2(N2)
|
||||
NodeN3(N3)
|
||||
|
||||
class NodeN1 navigation-paused;
|
||||
class NodeN1 navigation-part;
|
||||
class NodeN2 navigation-paused;
|
||||
class NodeN2 navigation-part;
|
||||
class NodeN1 navigation-started;
|
||||
class NodeN2 navigation-started;
|
||||
class NodeN3 navigation-resumed;
|
||||
class NodeN3 navigation-part;
|
||||
|
||||
subgraph RootChain
|
||||
direction TB
|
||||
NodeN1 --> NodeN2
|
||||
NodeN2 --> NodeN3
|
||||
NodeN1-->NodeN2
|
||||
NodeN2-->NodeN3
|
||||
end
|
||||
|
||||
class RootChain navigation-resumed;
|
||||
class RootChain navigation-part;
|
||||
|
||||
NodeN4(N4)
|
||||
NodeN5(N5)
|
||||
NodeN6(N6)
|
||||
|
||||
class NodeN4 navigation-paused;
|
||||
class NodeN4 navigation-part;
|
||||
class NodeN5 navigation-paused;
|
||||
class NodeN5 navigation-part;
|
||||
class NodeN6 navigation-paused;
|
||||
class NodeN6 navigation-part;
|
||||
class NodeN4 navigation-started;
|
||||
class NodeN5 navigation-started;
|
||||
class NodeN6 navigation-started;
|
||||
|
||||
subgraph N2Subchain
|
||||
direction TB
|
||||
NodeN4 --> NodeN5
|
||||
NodeN5 --> NodeN6
|
||||
NodeN4-->NodeN5
|
||||
NodeN5-->NodeN6
|
||||
end
|
||||
|
||||
class N2Subchain navigation-paused;
|
||||
class N2Subchain navigation-part;
|
||||
class N2Subchain navigation-started;
|
||||
|
||||
NodeN2 --> N2Subchain
|
||||
|
||||
NodeN7(N7)
|
||||
NodeN8(N8)
|
||||
|
||||
class NodeN7 navigation-paused;
|
||||
class NodeN7 navigation-part;
|
||||
class NodeN7 navigation-started;
|
||||
class NodeN8 navigation-resumed;
|
||||
class NodeN8 navigation-part;
|
||||
|
||||
subgraph N3Subchain
|
||||
direction TB
|
||||
|
|
@ -69,17 +336,14 @@ flowchart TB
|
|||
end
|
||||
|
||||
class N3Subchain navigation-resumed;
|
||||
class N3Subchain navigation-part;
|
||||
|
||||
NodeN3 --> N3Subchain
|
||||
|
||||
NodeN9(N9)
|
||||
NodeN10(N10)
|
||||
|
||||
class NodeN9 navigation-paused;
|
||||
class NodeN9 navigation-part;
|
||||
class NodeN9 navigation-started;
|
||||
class NodeN10 navigation-resumed;
|
||||
class NodeN10 navigation-part;
|
||||
|
||||
subgraph N3Subchain2
|
||||
direction TB
|
||||
|
|
@ -87,9 +351,6 @@ flowchart TB
|
|||
end
|
||||
|
||||
class N3Subchain2 navigation-resumed;
|
||||
class N3Subchain2 navigation-part;
|
||||
|
||||
NodeN3 --> N3Subchain2
|
||||
```
|
||||
|
||||
Any hierarchy starts with some root chain.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,19 @@
|
|||
.navigation-part > rect {
|
||||
stroke: black !important;
|
||||
}
|
||||
|
||||
.navigation-paused > rect {
|
||||
.navigation-started > rect {
|
||||
fill: #9d9d54 !important;
|
||||
stroke: black !important;
|
||||
}
|
||||
|
||||
.navigation-resumed > rect {
|
||||
fill: seagreen !important;
|
||||
stroke: black !important;
|
||||
}
|
||||
|
||||
.navigation-created > rect {
|
||||
fill: indianred !important;
|
||||
stroke: black !important;
|
||||
}
|
||||
|
||||
.navigation-new > rect {
|
||||
fill: darkgray !important;
|
||||
stroke: black !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,6 +115,8 @@ markdown_extensions:
|
|||
- name: mermaid
|
||||
class: mermaid
|
||||
format: !!python/name:mermaid2.fence_mermaid
|
||||
- admonition
|
||||
- pymdownx.details
|
||||
|
||||
plugins:
|
||||
- search
|
||||
|
|
@ -144,6 +146,6 @@ extra:
|
|||
extra_css:
|
||||
- resources/stylesheets/navigation.css
|
||||
extra_javascript:
|
||||
- https://unpkg.com/mermaid/dist/mermaid.min.js
|
||||
- resources/js/mermaid.min.js
|
||||
- resources/js/mermaid_dark_light_switcher.js
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue