Add picto multiview support and pinset-picto integration

Signed-off-by: alfonsodelavega <alfonso.delavega@tuta.io>
diff --git a/mkdocs/docs/doc/picto/.DS_Store b/mkdocs/docs/doc/picto/.DS_Store
index 2485237..7dc3544 100644
--- a/mkdocs/docs/doc/picto/.DS_Store
+++ b/mkdocs/docs/doc/picto/.DS_Store
Binary files differ
diff --git a/mkdocs/docs/doc/picto/index.md b/mkdocs/docs/doc/picto/index.md
index ddfce11..2123929 100644
--- a/mkdocs/docs/doc/picto/index.md
+++ b/mkdocs/docs/doc/picto/index.md
@@ -186,7 +186,7 @@
 }
 ```
 
-In such cases, it is preferable to generate many smaller diagrams; for this example, a class diagram for each class of the metamodel, surrounded by its super/sub/referenced types. 
+In such cases, it is preferable to generate many smaller diagrams; for this example, a class diagram for each class of the metamodel, surrounded by its super/sub/referenced types.
 
 ## Interactive Diagrams
 
@@ -200,6 +200,12 @@
 
 ![](picto-eclassifier.png)
 
+## Multiple Picto Views
+
+It is possible to open several Picto views in the same Eclipse workbench, which can be pinned to the same or different model editors. In the image below, the class diagram on the bottom left is pinned to the Social Network metamodel shown in the top left. The three Picto windows on the bottom right contain different views of the social network model shown in the tree editor of the top right.
+
+![](picto-multiview.png)
+
 ## Editors supported by Picto
 
 * Any editor that implements EMF's `IEditingDomainProvider` interface (e.g. the reflective Ecore editor, Exeed) as long as next to the edited file there is a file with the same name and a `.picto` suffix providing the format of the visualisation and the EGL template to be used (see the XMI-based `socialnetwork.model` and `socialnetwork.model.picto` files in the example directory)
@@ -209,7 +215,7 @@
 
 ## Extending Picto
 
-Picto provides the following extension points that can be used to extend its functionality. 
+Picto provides the following extension points that can be used to extend its functionality.
 
 | Extension Point                                  | Description                                                  |
 | ------------------------------------------------ | ------------------------------------------------------------ |
@@ -253,6 +259,8 @@
 
 ![](picto-gsn.png)
 
+![Table generated with the Pinset language](../pinset/pinset-picto.png)
+
 ## Additional Resources
 
-Additional resources about Picto are available [here](../articles/#picto).
\ No newline at end of file
+Additional resources about Picto are available [here](../articles/#picto).
diff --git a/mkdocs/docs/doc/picto/picto-multiview.png b/mkdocs/docs/doc/picto/picto-multiview.png
new file mode 100644
index 0000000..f13b596
--- /dev/null
+++ b/mkdocs/docs/doc/picto/picto-multiview.png
Binary files differ
diff --git a/mkdocs/docs/doc/pinset.md b/mkdocs/docs/doc/pinset/index.md
similarity index 92%
rename from mkdocs/docs/doc/pinset.md
rename to mkdocs/docs/doc/pinset/index.md
index e8b2515..d9f83db 100644
--- a/mkdocs/docs/doc/pinset.md
+++ b/mkdocs/docs/doc/pinset/index.md
@@ -334,6 +334,28 @@
 
 The dataset rule above contains a column with the normalised final grade of the course.
 
-## Coming soon
+## Picto Integration
 
-An integration of Pinset with [Picto](../picto) to ease the creation of advanced table visualisations inside the Eclipse IDE is on the way.
+Pinset has been integrated with the [Picto](../picto) model visualisation tool. Picto is an Eclipse plugin providing window(s) to render model views generated through model-to-text transformations. In the context of Pinset, Picto is able to generate table-based views out of the CSV output generated by Pinset rules.
+
+In the Social Network example that can be found in the [Picto](../picto) documentation, one of the views is generated with the following Pinset dataset rule:
+
+```pinset
+dataset personStats over person : Person {
+	properties[name]
+
+	column liked_by : Person.all.select(p |
+			p.likes.includes(person)).size()
+	column liking : person.likes.size()
+
+	column disliked_by : Person.all.select(p |
+			p.dislikes.includes(person)).size()
+	column disliking : person.dislikes.size()
+
+	column like_meter : liked_by - disliked_by
+}
+```
+
+The resulting view uses an enhanced html table provided by the [Metro UI](https://metroui.org.ua/) library which includes table styling, pagination, column sorting, and search capabilities:
+
+![](pinset-picto.png)
diff --git a/mkdocs/docs/doc/pinset/pinset-picto.png b/mkdocs/docs/doc/pinset/pinset-picto.png
new file mode 100644
index 0000000..d6e7ca8
--- /dev/null
+++ b/mkdocs/docs/doc/pinset/pinset-picto.png
Binary files differ
diff --git a/mkdocs/mkdocs.yml b/mkdocs/mkdocs.yml
index 7a843e9..e25e2ee 100644
--- a/mkdocs/mkdocs.yml
+++ b/mkdocs/mkdocs.yml
@@ -18,7 +18,7 @@
         - Model Migration (Flock): 'doc/flock.md'
         - Model Generation (EMG): 'doc/emg.md'
         - Unit Testing (EUnit): 'doc/eunit.md'
-        - Dataset Extraction (Pinset): 'doc/pinset.md'
+        - Dataset Extraction (Pinset): 'doc/pinset/index.md'
         - Wizard Language (EWL): 'doc/ewl.md'
     - Tools:
         - Picto: 'doc/picto/index.md'