commit d276ae6cfc3f77716ecc69b8d1af9c02e237194a
Author: Pavel Fidranský <fidransky@outlook.com>
Date:   Mon Oct 15 21:19:39 2018 +0200

    added back list of vertices in a Group

diff --git a/sources/src/main/webapp/js/components/group.js b/sources/src/main/webapp/js/components/group.js
index 1c986d4..2f1daf2 100644
--- a/sources/src/main/webapp/js/components/group.js
+++ b/sources/src/main/webapp/js/components/group.js
@@ -12,6 +12,7 @@ function Group(props) {
 	this.symbol = app.markSymbol.getMarkSymbol();
 
 	var rootElement;
+	var vertexListComponent;
 
 	var position = new Coordinates(0, 0);
 	var size = {
@@ -82,6 +83,10 @@ function Group(props) {
 
 		app.viewportComponent.removeVertex(vertex);
 
+		if (vertexListComponent) {
+			vertexListComponent.appendChild(vertex);
+		}
+
 		vertexList.push(vertex);
         if(isIconShown) showIconClick.bind(this)(null);
 	};
@@ -112,6 +117,10 @@ function Group(props) {
 
 		app.viewportComponent.addVertex(vertex);
 
+		if (vertexListComponent) {
+			vertexListComponent.removeChild(vertex);
+		}
+
 		vertexList.splice(vertexList.indexOf(vertex), 1);
 	};
 	
@@ -638,6 +647,14 @@ function Group(props) {
 		nameText.addEventListener('click', nameClick.bind(this));
 		rootElement.appendChild(nameText);
 
+		// vertex list
+		vertexListComponent = new GroupVertexList(this);
+		rootElement.appendChild(vertexListComponent.render());
+
+		vertexList.forEach(function(vertex) {
+			vertexListComponent.appendChild(vertex);
+		}, this);
+
 		// buttons
 		var buttonGroup = app.utils.createHtmlElement('div', {
 			'class': 'button-group',
diff --git a/sources/src/main/webapp/js/components/groupVertexList.js b/sources/src/main/webapp/js/components/groupVertexList.js
new file mode 100644
index 0000000..5d0cf08
--- /dev/null
+++ b/sources/src/main/webapp/js/components/groupVertexList.js
@@ -0,0 +1,73 @@
+/**
+ * Class representing a list of vertices added to a group.
+ * @see Group
+ * @constructor
+ * @param {Group} parentalGroup Group this vertex list is bound to.
+ */
+function GroupVertexList(parentalGroup) {
+	const lineHeight = 18;
+
+	var rootElement;
+	var listItemCounter = 0;
+
+	/**
+	 * Adds a new vertex to the list. Binds user interactions to local handler functions.
+	 * @param {vertex} vertex Vertex to be added to this list.
+	 */
+	this.appendChild = function(vertex) {
+		var listItemElement;
+		if (parentalGroup.isExcluded()) {
+			listItemElement = app.utils.createHtmlElement('li', {});
+		} else {
+			listItemElement = app.utils.createSvgElement('text', {
+				'y': listItemCounter * lineHeight,
+			});
+		}
+
+		listItemElement.setAttribute('data-id', vertex.id);
+		listItemElement.appendChild(document.createTextNode(vertex.name));
+		listItemElement.addEventListener('click', listItemClick.bind(vertex));
+
+		rootElement.appendChild(listItemElement);
+
+		listItemCounter++;
+	};
+
+	/**
+	 * Removes a vertex from the list.
+	 * @param {Vertex} vertex Vertex to be removed from this list.
+	 */
+	this.removeChild = function(vertex) {
+		var listItemElement = rootElement.querySelector('[data-id="' + vertex.id + '"]');
+
+		listItemElement.remove();
+	};
+
+	/**
+	 * Creates a new DOM element representing the list in memory.
+	 * @returns {Element} HTML or SVG DOM element depending on whether the group is excluded.
+	 */
+	this.render = function() {
+		if (parentalGroup.isExcluded()) {
+			rootElement = app.utils.createHtmlElement('ul', {});
+		} else {
+			rootElement = app.utils.createSvgElement('g', {
+				'transform': 'translate(70, 30)',
+			});
+		}
+
+		rootElement.setAttribute('class', 'group-vertex-list');
+
+		return rootElement;
+	};
+
+	/**
+	 * Vertex list item click interaction.
+	 * @param {Event} e Click event.
+	 */
+	function listItemClick(e) {
+		e.stopPropagation();
+
+		console.log('TODO: highlight vertex on click');
+	}
+}
diff --git a/sources/src/main/webapp/showGraph.jsp b/sources/src/main/webapp/showGraph.jsp
index 58c676f..fbe7a2b 100644
--- a/sources/src/main/webapp/showGraph.jsp
+++ b/sources/src/main/webapp/showGraph.jsp
@@ -26,6 +26,7 @@
 		<script src="js/components/edgePopover.js"></script>
 		<script src="js/components/floatingPoint.js"></script>
 		<script src="js/components/group.js"></script>
+		<script src="js/components/groupVertexList.js"></script>
 		<script src="js/components/minimap.js"></script>
 		<script src="js/components/modalWindow.js"></script>
 		<script src="js/components/sidebar.js"></script>
