zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2026-03-22 05:56:16 +08:00
Code Issues Projects Releases Wiki Activity

about node opacity, highlight modes and node details

Browse Source
This commit is contained in:
lana-k
2026-02-28 17:43:02 +01:00
parent d46601d659
commit fd960a2ebb
3 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Graph.md
View File

@@ -38,7 +38,18 @@ This is already enough to build a graph with default styling and circular layout
### General ### General
Set a background color of the graph in `Style` > `General` panel. In `Style` > `General` panel you can:
- Set a background color of the graph
- Change the highlight mode. The highlight mode determines the graph styling
when selecting or hovering over a node.
- `Node alone` means that nothing but the node you hover over or select will be highlighted.
The rest graph will be dimmed.
- `Node and neighbours` means that in addition to the selected or hovered node,
its neighbours and the edges connecting the neighbours with the node will be highlighted.
- `Include edges between neighbours` means that the selected or hovered node will
be highlighted together with its neighbours, edges connecting the node with
the neighbours and the edges between the neighbours.
### Nodes ### Nodes
@@ -48,7 +59,6 @@ There are the following settings in `Style` > `Nodes` panel:
size is too small, some labels can be visible only at a certain zoom level. size is too small, some labels can be visible only at a certain zoom level.
- Label Color - a color of node labels - Label Color - a color of node labels
- Size - set a node size. There are 3 modes of node sizing: constant, variable and calculated. - Size - set a node size. There are 3 modes of node sizing: constant, variable and calculated.
- `Constant` means that all nodes have the same given size. - `Constant` means that all nodes have the same given size.
- `Variable` allows you to choose a field where the node size is taken from. - `Variable` allows you to choose a field where the node size is taken from.
- `Calculated` allows you to choose a method that is used to calculate the node size. - `Calculated` allows you to choose a method that is used to calculate the node size.
@@ -61,7 +71,6 @@ There are the following settings in `Style` > `Nodes` panel:
between node sizes is more noticeable. between node sizes is more noticeable.
- Color - set a node color. There are 3 modes of node color: constant, variable and calculated. - Color - set a node color. There are 3 modes of node color: constant, variable and calculated.
- `Constant` means that all nodes have the same color. - `Constant` means that all nodes have the same color.
- `Variable` allows you to choose a field by which the color is determined. - `Variable` allows you to choose a field by which the color is determined.
With this option you can also choose if the color value should be taken directly or mapped to a With this option you can also choose if the color value should be taken directly or mapped to a
@@ -70,7 +79,6 @@ There are the following settings in `Style` > `Nodes` panel:
`Direct` mode means that in the JSON document representing the node, the value in the selected `Direct` mode means that in the JSON document representing the node, the value in the selected
field is used as a color. The color value in the JSON document can be set in different field is used as a color. The color value in the JSON document can be set in different
ways: ways:
1. As Hex, 8-digit (RGBA) Hex: 1. As Hex, 8-digit (RGBA) Hex:
``` ```
@@ -143,6 +151,7 @@ There are the following settings in `Style` > `Nodes` panel:
out-edges. You can also choose a color palette that will be used in a mapping of calculated out-edges. You can also choose a color palette that will be used in a mapping of calculated
values into an actual color. values into an actual color.
- Opacity - defines node opacity.
- Color As - defines how color mapping should work - continuously or categorically. - Color As - defines how color mapping should work - continuously or categorically.
Continuous mode is more suitable when the mapped values have a meaningful order. It looks more Continuous mode is more suitable when the mapped values have a meaningful order. It looks more
@@ -163,7 +172,6 @@ There are the following settings in `Style` > `Edges` panel:
some labels can be visible only at a certain zoom level. some labels can be visible only at a certain zoom level.
- Label Color - a color of edge labels - Label Color - a color of edge labels
- Size - set an edge thickness. There are 2 modes of edge sizing: constant and variable. - Size - set an edge thickness. There are 2 modes of edge sizing: constant and variable.
- `Constant` means that all edges have the same thickness. - `Constant` means that all edges have the same thickness.
- `Variable` allows you to choose a field where the edge size is taken from. - `Variable` allows you to choose a field where the edge size is taken from.
@@ -205,7 +213,15 @@ it is automatically run 50 iterations of the algorithm. You can change the amoun
automatically in `Initial Iterations`. You can also run and stop the algorithm manually by automatically in `Initial Iterations`. You can also run and stop the algorithm manually by
clicking `Start`/`Stop` button. clicking `Start`/`Stop` button.
![Fig. 3: ForceAtlas2 layout](./img/Screenshot_graph_force_atlas2.png) ![Fig. 4: ForceAtlas2 layout](./img/Screenshot_graph_force_atlas2.png)
## View node and edge details
To see the full object of the node or edge, first open the detail panel
by clicking ![](./img/viewCellValue.svg) in the side menu. Then select the node
or edge you are interested by clicking on it.
![Fig. 5: node details](./img/Screenshot_node_details.png)
[1]: ../How-to-get-result-set-suitable-for-graph-visualisation [1]: ../How-to-get-result-set-suitable-for-graph-visualisation
[2]: https://www.w3.org/TR/css-color-4/#named-colors [2]: https://www.w3.org/TR/css-color-4/#named-colors

BIN
img/Screenshot_node_details.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 321 KiB

11
img/viewCellValue.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2131_6054)">
<path d="M3.03784 10.993L3.03784 2.55579L11.4751 2.55579V7.08445C11.9655 6.92836 12.4772 6.88284 12.9751 6.94109V2.55579C12.9751 1.72736 12.3035 1.05579 11.4751 1.05579L3.03784 1.05579C2.20942 1.05579 1.53784 1.72736 1.53784 2.55579L1.53784 10.993C1.53784 11.8215 2.20942 12.493 3.03784 12.493H9.58307C9.271 12.0269 9.08279 11.5139 9.01083 10.993H3.03784Z" fill="#A2B1C6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2887 9.33754C14.9307 10.2921 14.6773 11.5863 13.7228 12.2283C12.7682 12.8703 11.474 12.6169 10.832 11.6623C10.19 10.7077 10.4434 9.41351 11.398 8.77155C12.3525 8.12958 13.6468 8.38299 14.2887 9.33754ZM13.9606 13.7986L16.1181 17.0066C16.3492 17.3503 16.8153 17.4416 17.159 17.2104C17.5027 16.9793 17.5939 16.5132 17.3628 16.1695L15.1884 12.9364C16.2949 11.7449 16.4801 9.90801 15.5334 8.50045C14.4292 6.85847 12.2029 6.42257 10.5609 7.52685C8.91891 8.63113 8.48302 10.8574 9.5873 12.4994C10.562 13.9488 12.4109 14.4584 13.9606 13.7986Z" fill="#A2B1C6"/>
</g>
<defs>
<clipPath id="clip0_2131_6054">
<rect width="18" height="18" fill="white" transform="translate(7.86805e-07 18) rotate(-90)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB