fix link

Co-authored-by: lana-k <skochetova89@gmail.com>

Graph.md

@@ -66,7 +66,7 @@ There are the following settings in `Style` > `Nodes` panel:
   - `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
     color palette.
-    
+
     `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
     ways:
@@ -207,6 +207,6 @@ clicking `Start`/`Stop` button.
 
 ![Fig. 3: ForceAtlas2 layout](./img/Screenshot_graph_force_atlas2.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
 [3]: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679

How-to-get-result-set-suitable-for-graph-visualisation.md

@@ -1,7 +1,7 @@
 # How to get a result set suitable for graph visualisation
 
 There are some [requirements for result sets][1] if you want to make a graph.
-Here is an example of building a query that returns a result set appropriate for graph 
+Here is an example of building a query that returns a result set appropriate for graph
 visualisation.
 
 Let's say, you have 2 tables:
@@ -17,20 +17,20 @@ Let's say, you have 2 tables:
 
 2. `student`:
 
-   | id | name           | house      |
-   | -- | -------------- | ---------- |
-   | 1  | Harry Potter   | Gryffindor |
-   | 2  | Ron Weasley    | Gryffindor |
-   | 3  | Draco Malfoy'  | Slytherin  |
-   | 4  | Luna Lovegood  | Ravenclaw  |
-   | 5  | Cedric Diggory | Hufflepuff |
+   | id  | name           | house      |
+   | --- | -------------- | ---------- |
+   | 1   | Harry Potter   | Gryffindor |
+   | 2   | Ron Weasley    | Gryffindor |
+   | 3   | Draco Malfoy'  | Slytherin  |
+   | 4   | Luna Lovegood  | Ravenclaw  |
+   | 5   | Cedric Diggory | Hufflepuff |
 
-Each student belongs to a certain house. 
-Let's say you want to build a graph with houses and students as nodes, where each house is linked 
+Each student belongs to a certain house.
+Let's say you want to build a graph with houses and students as nodes, where each house is linked
 with its students.
 
-We are going to use [json_object][2] function to form JSON documents. The result set should contain 
-both nodes and edges and we have to provide a field indicating if the document represents a node 
+We are going to use [json_object][2] function to form JSON documents. The result set should contain
+both nodes and edges and we have to provide a field indicating if the document represents a node
 (0) or and edge (1). Let's provide it as `object_type`:
 
 ```sql
@@ -44,12 +44,12 @@ SELECT json_object('object_type', 1)
 FROM student
 ```
 
-Note that we included `student` table twice. That is because the table contains not only students 
-but also their relationship to houses. So the records from the first union of `student` are used 
+Note that we included `student` table twice. That is because the table contains not only students
+but also their relationship to houses. So the records from the first union of `student` are used
 as nodes and from the second one - as edges.
 
-Then we need to provide an ID for each node. Let's put it in `node_id` field. The `node_id` value 
-for students is taken from `id` column and for houses - from `name`: 
+Then we need to provide an ID for each node. Let's put it in `node_id` field. The `node_id` value
+for students is taken from `id` column and for houses - from `name`:
 
 ```sql
 SELECT json_object('object_type', 0, 'node_id', name)
@@ -93,28 +93,27 @@ FROM student
 
 Run the query, the result set will look like this:
 
-| graph_object                                                                   |
-| ------------------------------------------------------------------------------ |
-| {"object_type":0,"node_id":"Gryffindor","label":"Gryffindor","type":"house"}   |
-| {"object_type":0,"node_id":"Hufflepuff","label":"Hufflepuff","type":"house"}   |
-| {"object_type":0,"node_id":"Ravenclaw","label":"Ravenclaw","type":"house"}     |
-| {"object_type":0,"node_id":"Slytherin","label":"Slytherin","type":"house"}     |
-| {"object_type":0,"node_id":1,"label":"Harry Potter","type":"student"}          |
-| {"object_type":0,"node_id":2,"label":"Ron Weasley","type":"student"}           |
-| {"object_type":0,"node_id":3,"label":"Draco Malfoy","type":"student"}          |
-| {"object_type":0,"node_id":4,"label":"Luna Lovegood","type":"student"}         |
-| {"object_type":0,"node_id":5,"label":"Cedric Diggory","type":"student"}        |
-| {"object_type":1,"node_source":"Gryffindor","target":1}                        |
-| {"object_type":1,"node_source":"Gryffindor","target":2}                        |
-| {"object_type":1,"node_source":"Slytherin","target":3}                         |
-| {"object_type":1,"node_source":"Ravenclaw","target":4}                         |
-| {"object_type":1,"node_source":"Hufflepuff","target":5}                        |
+| graph_object                                                                 |
+| ---------------------------------------------------------------------------- |
+| {"object_type":0,"node_id":"Gryffindor","label":"Gryffindor","type":"house"} |
+| {"object_type":0,"node_id":"Hufflepuff","label":"Hufflepuff","type":"house"} |
+| {"object_type":0,"node_id":"Ravenclaw","label":"Ravenclaw","type":"house"}   |
+| {"object_type":0,"node_id":"Slytherin","label":"Slytherin","type":"house"}   |
+| {"object_type":0,"node_id":1,"label":"Harry Potter","type":"student"}        |
+| {"object_type":0,"node_id":2,"label":"Ron Weasley","type":"student"}         |
+| {"object_type":0,"node_id":3,"label":"Draco Malfoy","type":"student"}        |
+| {"object_type":0,"node_id":4,"label":"Luna Lovegood","type":"student"}       |
+| {"object_type":0,"node_id":5,"label":"Cedric Diggory","type":"student"}      |
+| {"object_type":1,"node_source":"Gryffindor","target":1}                      |
+| {"object_type":1,"node_source":"Gryffindor","target":2}                      |
+| {"object_type":1,"node_source":"Slytherin","target":3}                       |
+| {"object_type":1,"node_source":"Ravenclaw","target":4}                       |
+| {"object_type":1,"node_source":"Hufflepuff","target":5}                      |
 
-Now in the graph editor, we can set mapping of the result set documents into node and edge 
+Now in the graph editor, we can set mapping of the result set documents into node and edge
 properties, set graph styles and get the following visualisation:
 
 ![Fig. 1: Graph visualisation example](./img/Screenshot_potter_example.png)
 
-
-[1]: ./graph#requirements-for-result-set
+[1]: ../graph#requirements-for-result-set
 [2]: https://sqlite.org/json1.html#jobj

How-to-work-with-plotly-interactive-selection.md

@@ -0,0 +1,33 @@
+# How to work with Plotly interactive selection
+
+Plotly supports interactive selection on some chart types, like scatterplot, 
+where you can select a subset of the points. It may be helpful for live
+presentation purposes, but there's no UI to interact with it if you want to
+compute something from the selection, like the count of points.
+
+![plotly scatterplot selection](./img/Screenshot_plotly_selection.png)
+
+This page proposes a workaround with browser console. Right click on the Plotly
+chart and select *Inspect* in the context menu. In the opened browser DOM 
+inspector scroll up and find the chart's container, matching 
+`div.js-plotly-plot` CSS selector. Right click and select *Use in console* or
+*Set as global variable* (depending on the browser). Then in *Console* tab paste
+the following snippet (adjust to your needs):
+
+```javascript
+temp0.on('plotly_selected', function(eventData) {
+  if (eventData) {
+    const start = Date.parse(eventData.range.x[0])
+    const finish = Date.parse(eventData.range.x[1])
+    console.log('---------- Selected points ----------')
+    console.log('Range, s:', (finish - start) / 1000)
+    console.log('Count:', eventData.points.length)
+  }
+})
+```
+
+To update set listener, first unset the existing one with:
+
+```javascript
+temp0.removeAllListeners('plotly_selected')
+```

sidebar.json

@@ -1,33 +1,36 @@
-[{
-	"sections": [{
-			"title": "For users",
-			"items": [
-				"/docs/",
-				"/docs/installation/",
-				"/docs/basic-usage/",
-				"/docs/multiple-csv-file-import/",
-				"/docs/manage-inquiries/",
-				"/docs/export-current-database/",
-				"/docs/graph/",
-				"/docs/pivot-table/",
-				"/docs/predefined-inquiries/",
-				"/docs/sharing/",
-				"/docs/diagnostic-information/"
-			]
-		},
-		{
-			"title": "Examples and tutorials",
-			"items": [
-				"/docs/how-to-migrate-to-sqliteviz-dot-com/",
-				"/docs/how-to-build-a-pivot-table-in-sq-lite/",
-				"/docs/how-to-rename-tables-and-columns-after-csv-import/"
-			]
-		},
-		{
-			"title": "For developers",
-			"items": [
-				"/docs/integrate-predefined-inquiries/"
-			]
-		}
-	]
-}]
+[
+  {
+    "sections": [
+      {
+        "title": "For users",
+        "items": [
+          "/docs/",
+          "/docs/installation/",
+          "/docs/basic-usage/",
+          "/docs/multiple-csv-file-import/",
+          "/docs/manage-inquiries/",
+          "/docs/export-current-database/",
+          "/docs/graph/",
+          "/docs/pivot-table/",
+          "/docs/predefined-inquiries/",
+          "/docs/sharing/",
+          "/docs/diagnostic-information/"
+        ]
+      },
+      {
+        "title": "Examples and tutorials",
+        "items": [
+          "/docs/how-to-migrate-to-sqliteviz-dot-com/",
+          "/docs/how-to-build-a-pivot-table-in-sq-lite/",
+          "/docs/how-to-rename-tables-and-columns-after-csv-import/",
+          "/docs/how-to-work-with-plotly-interactive-selection/",
+          "/docs/how-to-get-result-set-suitable-for-graph-visualisation/"
+        ]
+      },
+      {
+        "title": "For developers",
+        "items": ["/docs/integrate-predefined-inquiries/"]
+      }
+    ]
+  }
+]