From 3fc881257eb9616dc890d8de8b871f346dd12171 Mon Sep 17 00:00:00 2001
From: Prssanna Desai <prssud@gmail.com>
Date: Tue, 17 Jul 2018 19:06:25 +0530
Subject: [PATCH] New toolbars for embed view

Bug: T151057
Change-Id: Iadcdacf02800cc90e5ff4193b8fe5b1cecbc2744
---
 embed.html                                    | 371 ++++++++++++++----
 i18n/en.json                                  |   6 +-
 i18n/qqq.json                                 |  10 +-
 style.less                                    |  14 +
 wikibase/init.js                              |   9 +-
 wikibase/queryService/ui/App.js               |  64 +--
 wikibase/queryService/ui/ResultView.js        |  89 ++++-
 .../ui/resultBrowser/GraphResultBrowser.js    |   2 +-
 .../resultBrowser/helper/FormatterHelper.js   |   4 +-
 9 files changed, 425 insertions(+), 144 deletions(-)

diff --git a/embed.html b/embed.html
index 592d0c61..679fee4e 100644
--- a/embed.html
+++ b/embed.html
@@ -9,6 +9,9 @@
 <!-- build:css css/embed.style.min.css -->
 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
 <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
+<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
+<link rel="stylesheet" href="node_modules/codemirror/addon/hint/show-hint.css">
+<link rel="stylesheet" href="node_modules/codemirror/addon/display/fullscreen.css">
 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.css">
 <link rel="stylesheet" href="node_modules/select2/dist/css/select2.css">
 <link rel="stylesheet" href="node_modules/vis/dist/vis.css">
@@ -62,6 +65,10 @@
 	display: none;
 }
 
+#query-result {
+	height: 97vh;
+}
+
 .action-bar {
 	height: 30px;
 	width: 100%;
@@ -69,27 +76,8 @@
 	font-size: 18px;
 }
 
-.link {
-	position: fixed;
-	bottom: 3em;
-	left: 0px;
-	padding: 0px 2px 0px 2px;
-	background-color: rgba(255, 255, 255, 0.8);
-	z-index: 401; /* one above .leaflet-pane */
-}
-
-.edit {
-	position: fixed;
-	bottom: 2em;
-	left: 0;
-	font-size: 2em;
-	z-index: 401; /* one above .leaflet-pane */
-	padding: 0.2em;
-	border-radius: 5px;
-	background-color: rgba(255,255,255,0.8);
-}
 .popover {
-	max-width: 80vw;
+	max-width: 100vw;
 	min-width: 300px;
 	white-space: nowrap;
 }
@@ -104,20 +92,42 @@
 }
 
 #result-browser-menu {
-	height: 37vh;
-	overflow-y: scroll;
 	cursor: pointer;
+	list-style-type: none;
+	padding-left: 10px;
+}
+
+.result-browser-item {
+	padding: 0.5em 0 0.5em 0;
+}
+
+.result-browser {
+	color: #333;
+}
+
+.result-browser-inactive {
+	display: none;
 }
 
 .header-toolbar {
 	z-index: 1000;
 	position: fixed;
-	bottom: 3em;
-	right: 0;
+	left: -97px;
+	top: 26vh;
+	padding-top: 0.5em;
 	opacity: 0.2;
+	width: 150px;
 }
 .header-toolbar:hover {
+	transition: 0.4s;
 	opacity: 1;
+	background: #fff;
+	border: #ddd 1px solid;
+	left: 0;
+}
+
+.toolbar-label {
+	display: none;
 }
 
 .img-grid {
@@ -131,11 +141,13 @@
 .bootstrap-table {
 	width: 100%;
 	height: auto;
+	padding: 0 50px;
 }
 
-.jstree {
+#query-result .jstree {
 	width: 100%;
 	height: auto;
+	padding: 0 50px;
 }
 
 .expand-type {
@@ -149,12 +161,112 @@
 	opacity: 1;
 }
 
-@media only screen and (max-width: 500px) {
-    .header-toolbar {
-		display: none;
+#layout-options {
+	margin-top: 0px;
+	position: fixed;
+	z-index: 1001;
+	opacity: 0.2;
+	margin: auto;
+    width: 100%;
+}
+#layout-options:hover {
+	opacity: 1;
+}
+
+.layout-button {
+	border: none;
+	border-radius: 0;
+}
+
+.toolbar-right {
+	position: fixed;
+	right: -97px;
+	top: 26vh;
+	z-index: 1000;
+	padding-top: 0.5em;
+	opacity: 0.2;
+	width: 150px;
+}
+.toolbar-right:hover, .hovered {
+	transition: 0.4s;
+	opacity: 1;
+	background: #fff;
+	border: #ddd 1px solid;
+	right: 0;
+}
+
+.toolbar-right-item {
+	display: block;
+	width: 100%;
+	padding: 0.75em 0 0.75em 0;
+	position: relative;
+}
+.toolbar-right-item:focus {
+	outline: none;
+}
+
+.toolbar-right-icon {
+	position: relative;
+	left: -15px;
+}
+
+.toolbar-right-label {
+	position: absolute;
+}
+
+#embed-right-menu {
+	list-style-type: none;
+	position: static;
+	padding-left: 38px;
+}
+
+@media only screen and (max-height: 285px) {
+	.header-toolbar {
+		z-index: 1000;
+		position: fixed;
+		left: -97px;
+		top: 20vh;
+		padding-top: 0.5em;
+		opacity: 0.2;
+		width: 150px;
+		height: 65vh;
+		overflow-y: scroll;
+		overflow-x: hidden;
 	}
 }
 
+@media only screen and (max-height: 382px) {
+	#embed-right-menu {
+		list-style-type: none;
+		overflow-y: scroll;
+		overflow-x: hidden;
+		height: 60vh;
+		position: static;
+	}
+}
+
+@media only screen and (max-width: 400px) {
+	.toolbar-right {
+		display: none;
+	}
+
+	.header-toolbar {
+		display: none;
+	}
+
+	.bootstrap-table {
+		width: 100%;
+		height: auto;
+		padding: 0px;
+	}
+
+	.jstree {
+		width: 100%;
+		height: auto;
+		padding: 0px;
+	}
+
+}
 
 </style>
 <body>
@@ -168,35 +280,54 @@
 				</div>
 			</div>
 		</noscript>
+
 		<div class="header-toolbar">
-			<nav class="navbar navbar-default result">
-				<ul class="nav navbar-nav navbar-left">
-					<li><a id="display-button" href="#" data-toggle="dropdown" class="dropdown-toggle" data-placement="top" data-i18n="[title]wdqs-app-button-display-title">
-					<span id="display-button-icon" class="glyphicon glyphicon-eye-open" aria-hidden="true"></span><span id="display-button-label"></span>
-					<span class="caret"></span>
+			<ul id="result-browser-menu">
+			</ul>
+		</div>
+
+		<div class="toolbar-right">
+			<ul id="embed-right-menu">
+				<li>
+					<a href="#" target="_blank" rel="noopener" class="edit edit-link toolbar-right-item" data-toggle="popover">
+						<div data-toggle="tooltip" data-i18n="[title]wdqs-embed-button-edit-query-title">
+							<span class="glyphicon glyphicon-pencil toolbar-right-icon" aria-hidden="true"></span><span class="toolbar-right-label" data-i18n="wdqs-embed-button-edit-query"></span>
+						</div>
+					</a>
+				</li>
+				<li>
+					<a class="link edit-link toolbar-right-item" target="_blank" rel="noopener" data-i18n="[title]wdqs-embed-button-edit-code-title">
+						<span class="glyphicon glyphicon-edit toolbar-right-icon" aria-hidden="true"></span> <span class="toolbar-right-label" data-i18n="wdqs-embed-button-edit-code"></span>
+					</a>
+				</li>
+				<li>
+					<a href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Wikidata_Query_Help" target="_blank" class="toolbar-right-item">
+						<span class="glyphicon glyphicon-question-sign toolbar-right-icon" aria-hidden="true"></span> <span class="toolbar-right-label" data-i18n="wdqs-app-button-help" id="help-label"></span>
+					</a>
+				</li>
+				<li>
+					<a class="toolbar-right-item" href="#" id="open-example" data-toggle="modal" data-target="#QueryExamples">
+						<span class="fa fa-folder-open-o toolbar-right-icon"></span> <span class="toolbar-right-label" data-i18n="wdqs-app-button-examples" id="examples-label"></span>
+					</a>
+				</li>
+				<li>
+					<a href="#" class="shareQuery shortUrlTrigger result toolbar-right-item" target="_blank" data-i18n="[title]wdqs-app-button-link-title" data-toggle="popover">
+						<span class="glyphicon glyphicon-link toolbar-right-icon" aria-hidden="true"> </span> <span class="toolbar-right-label" data-i18n="wdqs-app-button-link"></span>
 					</a>
-						<ul id="result-browser-menu" class="dropdown-menu" role="menu">
-						</ul></li>
-					<li>
-						<a target="_blank" class="help" rel="noopener" href="https://www.wikidata.org/wiki/Wikidata:SPARQL_query_service/Wikidata_Query_Help/Result_Views">
-						<span class="fa fa-question-circle"></span></a>
-					</li>
-				</ul>
-				<ul class="nav navbar-nav navbar-right">
-					<li class="navbar-text">
-						<span class="query-total">
-							<span class="label label-default" id="response-summary"></span>
-						</span> &nbsp;
-					</li>
-				</ul>
-			</nav>
+				</li>
+				<li>
+					<a class="toolbar-right-item" href="#" data-toggle="modal" data-target="#CodeExamples" data-i18n="[title]wdqs-app-button-code-title">
+						<span class="fa fa-code toolbar-right-icon"></span> <span class="toolbar-right-label" data-i18n="wdqs-app-button-code"></span>
+					</a>
+				</li>
+			</ul>
 		</div>
 		<div class="action-bar">
 			<div class="message"></div>
 		</div>
 		<div id="query-result">Test result</div>
 		<div id="query-error" class="panel-heading">Test error</div>
-		
+
 		<div id="loading-spinner">
 			<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 			<span class="sr-only">Loading...</span>
@@ -213,17 +344,73 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 				</div>
 			</div>
 		</div>
-	<a class="link edit-link" target="_blank" rel="noopener" data-i18n="[title]wdqs-embed-button-edit-query-title"><small data-i18n="wdqs-embed-button-edit-query"></small></a>
-	<a href="#" target="_blank" rel="noopener" class="edit edit-link" data-toggle="popover"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
+
 	<div class="expand-type" data-toggle="tooltip" data-i18n="[title]wdqs-embed-explorer-button-outgoing">
 		<input id="expand-type-switch" type="checkbox" data-onstyle="primary" data-size="small">
 	</div>
 
-	<!-- JS files -->
+	<!-- Query Example Modal -->
+	<div class="modal fade QueryExamples" id="QueryExamples" tabindex="-1" role="dialog" aria-labelledby="QueryExamplesModalLabel">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-body">
+				<div class="tagCloud"></div>
+						<div class="tagFilter"></div>
+					<div class="input-group">
+						<span class="input-group-addon"><span class="glyphicon glyphicon-filter" aria-hidden="true"></span></span>
+						<input type="text" class="tableFilter form-control" placeholder="Type to filter"/>
+						<span class="input-group-addon"><span class="badge count"></span></span>
+					</div>
+					<div class="exampleTable">
+						<table class="table">
+							<tbody class="searchable">
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Code Example Modal -->
+	<div class="modal fade CodeExamples" id="CodeExamples" tabindex="-1" role="dialog" aria-labelledby="CodeExamplesModalLabel">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-body">
+					<div>
+						<!-- Nav tabs -->
+						<ul class="nav nav-tabs" role="tablist">
+						</ul>
+						<!-- Tab panes -->
+						<div class="tab-content">
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+		<!-- JS files -->
 	<!-- build:js js/embed.vendor.min.js -->
 	<script src="node_modules/jquery/dist/jquery.js"></script>
 	<script src="node_modules/underscore/underscore.js"></script>
 	<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
+	<script src="node_modules/codemirror/lib/codemirror.js"></script>
+	<script src="node_modules/codemirror/mode/sparql/sparql.js"></script>
+	<script src="node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+	<script src="node_modules/codemirror/mode/xml/xml.js"></script>
+	<script src="node_modules/codemirror/mode/clike/clike.js"></script>
+	<script src="node_modules/codemirror/mode/php/php.js"></script>
+	<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
+	<script src="node_modules/codemirror/mode/octave/octave.js"></script>
+	<script src="node_modules/codemirror/mode/python/python.js"></script>
+	<script src="node_modules/codemirror/mode/ruby/ruby.js"></script>
+	<script src="node_modules/codemirror/mode/r/r.js"></script>
+	<script src="node_modules/codemirror/addon/display/autorefresh.js"></script>
+	<script src="node_modules/codemirror/addon/hint/show-hint.js"></script>
+	<script src="node_modules/codemirror/addon/display/placeholder.js"></script>
+	<script src="node_modules/codemirror/addon/display/fullscreen.js"></script>
+	<script src="node_modules/codemirror/addon/comment/comment.js"></script>
 	<script src="node_modules/bootstrap-table/dist/bootstrap-table.js"></script>
 	<script src="node_modules/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile.js"></script>
 	<script src="node_modules/bootstrap-table/dist/extensions/key-events/bootstrap-table-key-events.js"></script>
@@ -241,7 +428,7 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 	<script src="node_modules/js-cookie/src/js.cookie.js"></script>
 	<script src="node_modules/vis/dist/vis.js"></script>
 	<script src="node_modules/select2/dist/js/select2.js"></script>
-	<script src="node_modules/moment/min/moment-with-locales.js"></script>
+-	<script src="node_modules/moment/min/moment-with-locales.js"></script>
 	<script src="node_modules/wellknown/wellknown.js"></script>
 	<script src="node_modules/jqcloud-npm/dist/jqcloud.js"></script>
 	<script src="node_modules/gijgo/js/gijgo.min.js"></script>
@@ -260,10 +447,14 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 	<script src="node_modules/jquery.i18n/src/jquery.i18n.parser.js"></script>
 	<script src="node_modules/jquery.i18n/src/jquery.i18n.emitter.js"></script>
 	<script src="node_modules/jquery.i18n/src/jquery.i18n.language.js"></script>
+	<script src="vendor/bootstrap-tags/js/bootstrap-tags.min.js"></script>
+
 	<!-- endbuild -->
 
 	<!-- build:js js/embed.wdqs.min.js -->
 	<script src="wikibase/config.js"></script>
+	<script src="wikibase/queryService/ui/dialog/CodeExample.js"></script>
+	<script src="wikibase/queryService/ui/dialog/QueryExampleDialog.js"></script>
 	<script src="wikibase/queryService/ui/ResultView.js"></script>
 	<script src="wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js"></script>
 	<script src="wikibase/queryService/ui/resultBrowser/helper/Options.js"></script>
@@ -286,6 +477,8 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 	<script src="wikibase/queryService/ui/resultBrowser/GraphResultBrowserNodeBrowser.js"></script>
 	<script src="wikibase/queryService/ui/resultBrowser/PolestarResultBrowser.js"></script>
 	<script src="wikibase/queryService/api/Sparql.js"></script>
+	<script src="wikibase/queryService/api/CodeSamples.js"></script>
+	<script src="wikibase/queryService/api/QuerySamples.js"></script>
 	<script src="wikibase/queryService/api/Wikibase.js"></script>
 	<script src="wikibase/queryService/api/Tracking.js"></script>
 	<script src="wikibase/queryService/RdfNamespaces.js"></script>
@@ -297,28 +490,16 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 	<!-- endbuild -->
 
 	<script type="text/javascript">
-		function renderEdit( api, sparqlApi, query, callback ) {
-			var qh = new wikibase.queryService.ui.queryHelper.QueryHelper( api, sparqlApi );
+		function renderEdit( qh, query, $editor, callback ) {
 			qh.setChangeListener( _.debounce( function( v ) {
 				callback( v.getQuery() );
 			}, 1500 ) );
-
-			var $editor = $( '<div>' );
 			try {
 				qh.setQuery( query );
 				qh.draw( $editor );
 			} catch ( e ) {
 				return;
 			}
-
-			$('.edit').on('click',function(e){
-			    e.preventDefault();
-			  }).popover( {
-					placement: 'top',
-					'html': true,
-					'content': $editor
-				} );
-
 			if ( /^#TEMPLATE=/m.test( query ) ) {
 				// expand query template popover after allowing some time for labels to load
 				setTimeout( function() { $( '.edit' ).click(); }, 500 );
@@ -330,11 +511,20 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 				lang = Cookies.get( 'lang' ) ? Cookies.get( 'lang' ) : config.language,
 				api = new wikibase.queryService.api.Wikibase( config.api.wikibase.uri, lang ),
 				sparqlApi = new wikibase.queryService.api.Sparql( config.api.sparql.uri, lang ),
-				resultView = new wikibase.queryService.ui.ResultView( sparqlApi ),
+				codeSamplesApi = new wikibase.queryService.api.CodeSamples(
+					config.api.sparql.uri,
+					config.location.root,
+					config.location.index
+				),
+				resultView = new wikibase.queryService.ui.ResultView( sparqlApi, codeSamplesApi ),
 				query = decodeURIComponent( window.location.hash.substr( 1 ) );
 
+			var qh = new wikibase.queryService.ui.queryHelper.QueryHelper( api, sparqlApi );
+
 			resultView.trackingNamespace = 'wikibase.queryService.ui.embed.';
 
+			var $editor = $( '<div>' );
+
 			$.i18n().locale = lang;
 			$.when(
 				config.i18nLoad( lang )
@@ -344,20 +534,18 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 
 				resultView.draw( query ).then( function() {
 					$( '.logo' ).hide();
-				} );
-				renderEdit( api, sparqlApi, query, function( q ){
+				} )
+				renderEdit( qh, query, $editor, function( q ) {
 					resultView.draw( q );
-					window.location.hash = '#' + encodeURIComponent( q )
-					$( '.edit-link' ).attr( 'href', config.location.index + window.location.hash )
+					window.location.hash = '#' + encodeURIComponent( q );
+					$( '.edit-link' ).attr( 'href', config.location.index + window.location.hash );
 				} );
-
 				$( '.edit-link' ).attr( 'href', config.location.index + window.location.hash )
+
 			} );
 
 			$( '#display-button' ).closest( '.navbar' ).addClass( 'dropup' );
 
-			$( 'ul#result-browser-menu.dropdown-menu li a' ).removeAttr( 'href' );
-
 			$( '#expand-type-switch' ).change( function() {
 				if( $( this ).prop( 'checked' ) ) {
 					$( '.expand-type' ).attr( 'title', $.i18n( 'wdqs-embed-explorer-button-incoming' ) );
@@ -367,13 +555,42 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
 				}
 			})
 
-			$('a.result-browser').click( function( e ) {
-				if ( $(this).text() != 'Graph' ) {
+			$( 'a.result-browser' ).click( function( e ) {
+				if ( $( this ).text() != 'Graph' ) {
 					$( '.expand-type' ).hide();
 				} else {
 					$( '.expand-type' ).show();
 				}
-			} )
+
+			} );
+
+			$( '.header-toolbar' ).hover( function() {
+				$( '.toolbar-label' ).css( 'display', 'block' );
+				}, function() {
+					$( '.toolbar-label' ).css( 'display', 'none' );
+			});
+
+			$( '.toolbar-right .hovered' ).hover( function() {
+				$( '.toolbar-right-label' ).css( 'display', 'inline-block' );
+				}, function() {
+					$( '.toolbar-right-label' ).css( 'display', 'none' );
+			});
+
+			$( window ).on( 'hashchange', function( e ) {
+				$( '.edit-link' ).attr( 'href', config.location.index + window.location.hash );
+				query = decodeURIComponent( window.location.hash.substr( 1 ) );
+				qh.setQuery( query );
+				qh.draw( $editor );
+			});
+
+			$( '.edit' ).on( 'click', function( e ) {
+				e.preventDefault();
+				$( '.toolbar-right' ).toggleClass( 'hovered' );
+			}).popover({
+					placement: 'bottom',
+					'html': true,
+					'content': $editor,
+			});
 
 		} );
 
diff --git a/i18n/en.json b/i18n/en.json
index 42c4599b..e28fa731 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -114,8 +114,10 @@
     "wdqs-action-preview": "Result preview",
     "wdqs-result-map-layers-all": "All layers",
     "wdqs-result-map-progress": "Loading map data: $1%",
-    "wdqs-embed-button-edit-query": "Edit this query",
-    "wdqs-embed-button-edit-query-title": "Edit this query with the SPARQL editor",
+    "wdqs-embed-button-edit-query": "Edit",
+    "wdqs-embed-button-edit-query-title": "Edit this query with the query helper",
+    "wdqs-embed-button-edit-code": "Edit code",
+    "wdqs-embed-button-edit-code-title": "Edit this query with the SPARQL editor",
     "wdqs-embed-explorer-button-incoming": "Show incoming links",
     "wdqs-embed-explorer-button-outgoing": "Show outgoing links"
 }
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 517b10be..45afe6cf 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -116,8 +116,10 @@
 	"wdqs-action-preview": "Label for progressbar displaying preview",
 	"wdqs-result-map-layers-all": "Label for all layers in layer control on map view",
 	"wdqs-result-map-progress": "Message while loading data for the map view. $1 is a percentage from 0 to 100.",
-	"wdqs-embed-button-edit-query": "Label for button in embed",
-	"wdqs-embed-button-edit-query-title": "Title for button in embed",
-	"wdqs-embed-explorer-button-incoming": "Show incoming links",
-	"wdqs-embed-explorer-button-outgoing": "Show outgoing links"
+	"wdqs-embed-button-edit-query": "Label for button to edit a query with the query helper in embed",
+    "wdqs-embed-button-edit-query-title": "Title for the Edit button in embed",
+    "wdqs-embed-button-edit-code": "Label for button to edit the query with the SPARQL editor in embed",
+    "wdqs-embed-button-edit-code-title": "Title for the Edit Code button in embed",
+	"wdqs-embed-explorer-button-incoming": "Title for button to show incoming links",
+	"wdqs-embed-explorer-button-outgoing": "Title for button to show outgoing links"
 }
diff --git a/style.less b/style.less
index 7ea953fd..63b1bf77 100644
--- a/style.less
+++ b/style.less
@@ -279,6 +279,11 @@ a {
 	width: 100%;
 }
 
+#layout-options {
+	margin-top: -35px;
+	text-align: center;
+}
+
 .error-line {
 	border-bottom: 2px dotted @color-erroneous;
 }
@@ -391,6 +396,15 @@ a {
 	}
 }
 
+.toolbar-label {
+	position: absolute;
+}
+
+.toolbar-icon {
+	position: relative;
+	left: 105px;
+}
+
 .table-cell-selected {
 	background-color: @background-color-primary;
 }
diff --git a/wikibase/init.js b/wikibase/init.js
index 9622ceac..a0bf95cd 100644
--- a/wikibase/init.js
+++ b/wikibase/init.js
@@ -63,18 +63,13 @@
 				editor,
 				new wb.ui.queryHelper.QueryHelper( api, sparqlApi ),
 				sparqlApi,
-				querySamplesApi
+				querySamplesApi,
+				codeSamplesApi
 			);
 
 			if ( !config.showBirthdayPresents ) {
 				$( '[data-target="#CodeExamples"]' ).hide(); // TODO: remove after birthday
 			}
-			new wikibase.queryService.ui.dialog.CodeExample(
-				$( '#CodeExamples' ),
-				function () {
-					return codeSamplesApi.getExamples( editor.getValue() );
-				}
-			);
 
 		} );
 
diff --git a/wikibase/queryService/ui/App.js b/wikibase/queryService/ui/App.js
index b07f3c32..9d48cd18 100644
--- a/wikibase/queryService/ui/App.js
+++ b/wikibase/queryService/ui/App.js
@@ -24,12 +24,13 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 	 * @param {wikibase.queryService.ui.editor.Editor} editor
 	 * @param {wikibase.queryService.api.Sparql} queryHelper
 	 */
-	function SELF( $element, editor, queryHelper, sparqlApi, querySamplesApi ) {
+	function SELF( $element, editor, queryHelper, sparqlApi, querySamplesApi, codeSamplesApi ) {
 		this._$element = $element;
 		this._editor = editor;
 		this._queryHelper = queryHelper;
 		this._sparqlApi = sparqlApi;
 		this._querySamplesApi = querySamplesApi;
+		this._codeSamplesApi = codeSamplesApi;
 
 		this._init();
 	}
@@ -58,6 +59,12 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 	 */
 	SELF.prototype._querySamplesApi = null;
 
+	/**
+	 * @property {wikibase.queryService.api.CodeSamples}
+	 * @private
+	 */
+	SELF.prototype._codeSamplesApi = null;
+
 	/**
 	 * @property {wikibase.queryService.ui.editor.Editor}
 	 * @private
@@ -104,14 +111,14 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 			this._sparqlApi = new wikibase.queryService.api.Sparql();
 		}
 
-		if ( !this._resultView ) {
-			this._resultView = new wikibase.queryService.ui.ResultView( this._sparqlApi );
-		}
-
 		if ( !this._querySamplesApi ) {
 			this._querySamplesApi = new wikibase.queryService.api.QuerySamples();
 		}
 
+		if ( !this._codeSamplesApi ) {
+			this._codeSamplesApi = new wikibase.queryService.api.CodeSamples();
+		}
+
 		if ( !this._trackingApi ) {
 			this._trackingApi = new wikibase.queryService.api.Tracking();
 		}
@@ -120,12 +127,15 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 			this._editor = new wikibase.queryService.ui.editor.Editor();
 		}
 
+		if ( !this._resultView ) {
+			this._resultView = new wikibase.queryService.ui.ResultView( this._sparqlApi, this._codeSamplesApi, this._editor );
+		}
+
 		this._track( 'init' );
 
 		this._initApp();
 		this._initEditor();
 		this._initQueryHelper();
-		this._initExamples();
 		this._initDataUpdated();
 		this._initQuery();
 		this._initRdfNamespaces();
@@ -459,25 +469,6 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 		}
 	};
 
-	/**
-	 * @private
-	 */
-	SELF.prototype._initExamples = function() {
-		var self = this;
-		new wikibase.queryService.ui.dialog.QueryExampleDialog( $( '#QueryExamples' ),
-				this._querySamplesApi, function( query, title ) {
-					if ( !query || !query.trim() ) {
-						return;
-					}
-
-					self._editor.setValue( '#' + title + '\n' + query );
-
-					$( '#QueryExamples' ).one( 'hidden.bs.modal', function() {
-						setTimeout( function() { self._editor.focus(); }, 0 );
-					} );
-				} );
-	};
-
 	/**
 	 * @private
 	 */
@@ -608,11 +599,6 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 			self._track( 'buttonClick.clear' );
 		} );
 
-		$( '.explorer-close' ).click( function( e ) {
-			e.preventDefault();
-			$( '.explorer-panel' ).hide();
-		} );
-
 		$( '.restore' ).click( function( e ) {
 			self._track( 'buttonClick.restore' );
 			e.preventDefault();
@@ -685,24 +671,6 @@ wikibase.queryService.ui.App = ( function( $, download, window, _, Cookies, mome
 			self._track( 'buttonClick.shortUrlQuery' );
 		} );
 
-		$( '.shortUrlTrigger.result' ).clickover( {
-			placement: 'left',
-			'global_close': true,
-			'html': true,
-			'content': function() {
-				self._updateQueryUrl();
-				var $link = $( '<a>' ).attr( 'href', 'embed.html' + window.location.hash );
-				return '<iframe ' +
-					'class="shortUrl" ' +
-					'src="' + SHORTURL_API + encodeURIComponent( $link[0].href ) + '" ' +
-					'referrerpolicy="origin" ' +
-					'sandbox="" ' +
-					'></iframe>';
-			}
-		} ).click( function() {
-			self._track( 'buttonClick.shortUrlResult' );
-		} );
-
 		$( '.embed.result' ).clickover( {
 			placement: 'left',
 			'global_close': true,
diff --git a/wikibase/queryService/ui/ResultView.js b/wikibase/queryService/ui/ResultView.js
index fa6086fa..d3ddd722 100644
--- a/wikibase/queryService/ui/ResultView.js
+++ b/wikibase/queryService/ui/ResultView.js
@@ -19,8 +19,10 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 	 *
 	 * @param {wikibase.queryService.api.Sparql} sparqlApi
 	 */
-	function SELF( sparqlApi ) {
+	function SELF( sparqlApi, codeSamplesApi, editor ) {
 		this._sparqlApi = sparqlApi;
+		this._codeSamplesApi = codeSamplesApi;
+		this._editor = editor;
 
 		this._init();
 	}
@@ -43,6 +45,12 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 	 */
 	SELF.prototype._sparqlApi = null;
 
+	/**
+	 * @property {wikibase.queryService.api.CodeSamples}
+	 * @private
+	 */
+	SELF.prototype._codeSamplesApi = null;
+
 	/**
 	 * @property {string}
 	 * @private
@@ -191,6 +199,10 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 			this._trackingApi = new wikibase.queryService.api.Tracking();
 		}
 
+		if ( !this._codeSamplesApi ) {
+			this._codeSamplesApi = new wikibase.queryService.api.CodeSamples();
+		}
+
 		this._actionBar = new wikibase.queryService.ui.toolbar.Actionbar( $( '.action-bar' ) );
 
 		this._sparqlQuery = this._query = new wikibase.queryService.ui.queryHelper.SparqlQuery();
@@ -198,6 +210,9 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 		this._internationalizeCharts();
 
 		this._initResultBrowserMenu();
+		this._initExamples();
+		this._initCodeExamples();
+		this._initQueryLinkPopover();
 	};
 
 	/**
@@ -218,8 +233,8 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 	 */
 	SELF.prototype._initResultBrowserMenu = function() {
 		$.each( this._resultBrowsers, function( key, b ) {
-			var $element = $( '<li><a class="result-browser" href="#">' +
-					'<span class="' + b.icon.split( '-', 1 )[0] + ' ' + b.icon + '"></span>' + b.label +
+			var $element = $( '<li class="result-browser-item"><a class="result-browser" href="#">' +
+					'<span class="toolbar-label">' + b.label + ' ' + '</span>' + '<span class="toolbar-icon ' + b.icon.split( '-', 1 )[0] + ' ' + b.icon + '"></span>' +
 					'</a></li>' );
 			$element.appendTo( $( '#result-browser-menu' ) );
 			b.$element = $element;
@@ -444,6 +459,72 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 		return { defaultName: defaultName, optionsMap: optionsMap };
 	};
 
+	/**
+	 * @private
+	 */
+	SELF.prototype._initExamples = function() {
+		var self = this;
+		new wikibase.queryService.ui.dialog.QueryExampleDialog( $( '#QueryExamples' ),
+				this._querySamplesApi, function( query, title ) {
+					if ( !query || !query.trim() ) {
+						return;
+					}
+
+					if ( self._editor ) {
+						self._editor.setValue( '#' + title + '\n' + query );
+						$( '#QueryExamples' ).one( 'hidden.bs.modal', function() {
+							setTimeout( function() { self._editor.focus(); }, 0 );
+						} );
+					} else {
+						self.draw( query );
+						window.location.hash = '#' + encodeURIComponent( '#' + title + '\n' + query );
+					}
+				} );
+	};
+
+	/**
+	 * @private
+	 */
+	SELF.prototype._initCodeExamples = function() {
+		var self = this;
+		new wikibase.queryService.ui.dialog.CodeExample(
+			$( '#CodeExamples' ),
+			function () {
+				return self._codeSamplesApi.getExamples( self._query );
+			}
+		);
+	};
+
+	/**
+	 * @private
+	 */
+	SELF.prototype._initQueryLinkPopover = function() {
+		var self = this;
+		var SHORTURL_API = '//tinyurl.com/api-create.php?url=';
+		$( '.shortUrlTrigger.result' ).clickover( {
+			placement: 'left',
+			'global_close': true,
+			'html': true,
+			'content': function() {
+				var queryUrl;
+				if ( self._editor ) {
+					queryUrl = '#' + encodeURIComponent( self._editor.getValue() );
+				} else {
+					queryUrl = window.location.hash;
+				}
+				var $link = $( '<a>' ).attr( 'href', 'embed.html' + queryUrl );
+				return '<iframe ' +
+					'class="shortUrl" ' +
+					'src="' + SHORTURL_API + encodeURIComponent( $link[0].href ) + '" ' +
+					'referrerpolicy="origin" ' +
+					'sandbox="" ' +
+					'></iframe>';
+			}
+		} ).click( function() {
+			self._track( 'buttonClick.shortUrlResult' );
+		} );
+	};
+
 	/**
 	 * @private
 	 */
@@ -455,6 +536,7 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 
 			if ( b.object.isDrawable() ) {
 				b.$element.css( 'opacity', 1 ).attr( 'href', '#' );
+
 				b.$element.click( function() {
 					$( this ).closest( '.open' ).removeClass( 'open' );
 
@@ -468,6 +550,7 @@ wikibase.queryService.ui.ResultView = ( function( $, window ) {
 				} );
 			} else {
 				b.$element.css( 'opacity', 0.5 ).removeAttr( 'href' );
+				b.$element.css( 'opacity', 0.5 ).addClass( 'result-browser-inactive' );
 			}
 		} );
 	};
diff --git a/wikibase/queryService/ui/resultBrowser/GraphResultBrowser.js b/wikibase/queryService/ui/resultBrowser/GraphResultBrowser.js
index 14a029d6..c74cb3f0 100644
--- a/wikibase/queryService/ui/resultBrowser/GraphResultBrowser.js
+++ b/wikibase/queryService/ui/resultBrowser/GraphResultBrowser.js
@@ -94,7 +94,7 @@ wikibase.queryService.ui.resultBrowser.GraphResultBrowser = ( function( $, vis,
 	 * @private
 	 */
 	SELF.prototype._createToolbar = function( network ) {
-		var $toolbar = $( '<div id="layout-options" style="margin-top: -35px; text-align: center;">' );
+		var $toolbar = $( '<div id="layout-options">' );
 
 		function setLayout( type ) {
 			if ( type === 'none' ) {
diff --git a/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js b/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
index 75b9301e..ea1d82c1 100644
--- a/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
+++ b/wikibase/queryService/ui/resultBrowser/helper/FormatterHelper.js
@@ -393,8 +393,8 @@ wikibase.queryService.ui.resultBrowser.helper.FormatterHelper = ( function( $, m
 			autoOpen: false,
 			maxWidth: window.innerWidth,
 			maxHeight: window.innerHeight,
-			minHeight: 100,
-			minWidth: 100,
+			minHeight: 220,
+			minWidth: 220,
 			resizable: true,
 			width: window.innerWidth / 2,
 			height: Math.min( window.innerWidth, window.innerHeight ) / 2,