Skip to content
Permalink
Browse files

Allow incoming links to be shown on the graph explorer dialog

Bug: T197778
Change-Id: Ic58ab0646ee42f2bcd76fb81862319fb18bc1ed0
  • Loading branch information...
prssanna committed Jun 20, 2018
1 parent 10e3374 commit 26a76e06135fde379516d0de9a11e5a1c1aeb8dd
@@ -24,6 +24,7 @@
<link rel="stylesheet" href="node_modules/jstree/dist/themes/default/style.css">
<link rel="stylesheet" href="node_modules/jqcloud-npm/dist/jqcloud.css">
<link rel="stylesheet" href="node_modules/gijgo/css/gijgo.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css">
<link rel="stylesheet" href="style.css">
<!-- endbuild -->
<!-- build:none -->
@@ -119,6 +120,19 @@
opacity: 1;
}
.hide-toolbar {
display: none;
float: right;
padding: 5px;
color: #777777ab;
}
.show-toolbar {
position: fixed;
bottom: 3em;
right: 0;
}
.img-grid {
width: 95vw;
}
@@ -137,6 +151,17 @@
height: auto;
}
.expand-type {
left: 47%;
bottom: 3em;
opacity: 0.2;
position: fixed;
display: none;
}
.expand-type:hover {
opacity: 1;
}
</style>
<body>
<div class="logo"></div>
@@ -163,6 +188,7 @@
<span class="fa fa-question-circle"></span></a>
</li>
</ul>
<span class="btn hide-toolbar glyphicon glyphicon-remove"></span>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">
<span class="query-total">
@@ -196,6 +222,9 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
</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 -->
<!-- build:js js/embed.vendor.min.js -->
@@ -206,6 +235,7 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
<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>
<script src="node_modules/bootstrap-table/dist/extensions/cookie/bootstrap-table-cookie.js"></script>
<script src="node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
<script src="node_modules/ekko-lightbox/dist/ekko-lightbox.js"></script>
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<script src="node_modules/leaflet-fullscreen/dist/Leaflet.fullscreen.js"></script>
@@ -333,8 +363,35 @@ <h3 data-role="title" class="modal-title pull-left explorer-title">Explorer</h3>
$( '#display-button' ).closest( '.navbar' ).addClass( 'dropup' );
$('ul#result-browser-menu.dropdown-menu li a').removeAttr('href');
$( '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' ) );
}
else {
$( '.expand-type' ).attr( 'title', $.i18n( 'wdqs-embed-explorer-button-outgoing' ) );
}
})
$('a.result-browser').click( function( e ) {
if ( $(this).text() != 'Graph' ) {
$( '.expand-type' ).hide();
} else {
$( '.expand-type' ).show();
}
} )
$('.hide-toolbar').click(function() {
$( '.header-toolbar' ).hide();
$( 'body' ).append( '<a class="btn show-toolbar" data-toggle="tooltip" title="Open toolbar" onclick="showToolbar()"><span aria-hidden="true"><i class="fa fa-bars"></i></span></a>' );
});
} );
function showToolbar() {
$( '.show-toolbar' ).hide();
$( '.header-toolbar' ).show();
}
</script>
</body>
</html>
@@ -60,6 +60,7 @@
"wdqs-app-resultbrowser-hierarchical-lr": "Hierarchical layout left to right",
"wdqs-app-resultbrowser-hierarchical-ud": "Hierarchical layout up to down",
"wdqs-app-resultbrowser-hierarchical-rl": "Hierarchical layout right to left",
"wdqs-app-resultbrowser-non-hierarchical": "Non-hierarchical layout",
"wdqs-app-resultbrowser-table": "Table",
"wdqs-app-resultbrowser-image-grid": "Image grid",
"wdqs-app-resultbrowser-graph-builder": "Graph builder",
@@ -114,5 +115,7 @@
"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-title": "Edit this query with the SPARQL editor",
"wdqs-embed-explorer-button-incoming": "Show incoming links",
"wdqs-embed-explorer-button-outgoing": "Show outgoing links"
}
@@ -62,6 +62,7 @@
"wdqs-app-resultbrowser-hierarchical-lr": "Button message in graph browser toolbar",
"wdqs-app-resultbrowser-hierarchical-ud": "Button message in graph browser toolbar",
"wdqs-app-resultbrowser-hierarchical-rl": "Button message in graph browser toolbar",
"wdqs-app-resultbrowser-non-hierarchical": "Non-hierarchical layout",
"wdqs-app-resultbrowser-table": "Label for Table result view, which shows query results in tabular form, one result per line",
"wdqs-app-resultbrowser-image-grid": "Label of Image grid result view",
"wdqs-app-resultbrowser-graph-builder": "Label of Graph builder result view",
@@ -116,5 +117,7 @@
"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-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"
}
@@ -21,6 +21,7 @@
"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap-table": "^1.11.2",
"bootstrap-toggle": "^2.2.2",
"codemirror": "^5.35.0",
"d3": "^3.5.17",
"dimple-js": "^2.1.4",
@@ -50,7 +51,7 @@
"wellknown": "^0.5.0"
},
"devDependencies": {
"grunt": "^1.0.2",
"grunt": "^1.0.3",
"grunt-auto-install": "^0.3.1",
"grunt-banana-checker": "^0.6.0",
"grunt-cli": "^1.2.0",
@@ -32,6 +32,10 @@ wikibase.queryService.ui.resultBrowser.GraphResultBrowser = ( function( $, vis,
}
};

var EXPAND_TYPE_INCOMING = 'incoming';

var EXPAND_TYPE_OUTGOING = 'outgoing';

/**
* A graph result browser
*
@@ -53,8 +57,23 @@ wikibase.queryService.ui.resultBrowser.GraphResultBrowser = ( function( $, vis,
* @param {jQuery} $element target element
*/
SELF.prototype.draw = function( $element ) {
var $container = $( '<div>' ).height( '100vh' );

var $container;
//only for embed.html
if ( $( '#expand-type-switch' ).length !== 0 ) {
if ( $( window ).height() === $( parent.window ).height() ) {
$container = $( '<div>' ).height( '100vh' );
} else {
$container = $( '<div>' ).height( '90vh' );
$( '.hide-toolbar' ).show();
}
$( '.expand-type' ).show();
$( '#expand-type-switch' ).bootstrapToggle( {
on: 'Incoming',
off: 'Outgoing'
} ) ;
} else {
$container = $( '<div>' ).height( '100vh' );
}
var data = this._getData();
var network = new vis.Network( $container[0], data, GRAPH_OPTIONS );

@@ -67,7 +86,11 @@ wikibase.queryService.ui.resultBrowser.GraphResultBrowser = ( function( $, vis,
var nodeBrowser = new wikibase.queryService.ui.resultBrowser.GraphResultBrowserNodeBrowser( data.nodes, data.edges, this.getSparqlApi() );
network.on( 'click', function( properties ) {
var nodeId = properties.nodes[0] || null;
nodeBrowser.browse( nodeId );
if ( $( '#expand-type-switch' ).is( ':checked' ) ) {
nodeBrowser.browse( nodeId, EXPAND_TYPE_INCOMING );
} else {
nodeBrowser.browse( nodeId, EXPAND_TYPE_OUTGOING );
}
} );

$container.prepend( this._createToolbar( network ) );
@@ -81,45 +104,62 @@ wikibase.queryService.ui.resultBrowser.GraphResultBrowser = ( function( $, vis,
var $toolbar = $( '<div id="layout-options" style="margin-top: -35px; text-align: center;">' );

function setLayout( type ) {
network.setOptions( {
layout: {
hierarchical: {
direction: type,
sortMethod: 'directed'
if ( type === 'none' ) {
network.setOptions( {
layout: {
hierarchical: {
enabled: false
}
}
}
} );
} );
} else {
network.setOptions( {
layout: {
hierarchical: {
direction: type,
sortMethod: 'directed'
}
}
} );
}
}

$( '<a class="btn btn-default">' ).click( function() {
$( '<a class="btn btn-default layout-button">' ).click( function() {
network.stabilize( 100 );
} ).append(
'<span class="glyphicon glyphicon-fullscreen" aria-hidden="true" title="' +
this._i18n( 'wdqs-app-resultbrowser-stabilize' ) +
'"></span>'
).appendTo( $toolbar );

$( '<a class="btn btn-default">' ).click( function() {
$( '<a class="btn btn-default layout-button">' ).click( function() {
setLayout( 'LR' );
} ).append( '<span class="glyphicon glyphicon-indent-left" aria-hidden="true" title="' +
this._i18n( 'wdqs-app-resultbrowser-hierarchical-lr' ) +
'"></span>'
).appendTo( $toolbar );

$( '<a class="btn btn-default">' ).click( function() {
$( '<a class="btn btn-default layout-button">' ).click( function() {
setLayout( 'UD' );
} ).append( '<span class="glyphicon glyphicon-align-center" aria-hidden="true" title="' +
this._i18n( 'wdqs-app-resultbrowser-hierarchical-ud' ) +
'"></span>'
).appendTo( $toolbar );

$( '<a class="btn btn-default">' ).click( function() {
$( '<a class="btn btn-default layout-button">' ).click( function() {
setLayout( 'RL' );
} ).append( '<span class="glyphicon glyphicon-indent-right" aria-hidden="true" title="' +
this._i18n( 'wdqs-app-resultbrowser-hierarchical-rl' ) +
'"></span>'
).appendTo( $toolbar );

$( '<a class="btn btn-default layout-button">' ).click( function() {
setLayout( 'none' );
} ).append( '<span class="glyphicon glyphicon-align-justify" aria-hidden="true" title="' +
this._i18n( 'wdqs-app-resultbrowser-non-hierarchical' ) +
'"></span>'
).appendTo( $toolbar );

return $toolbar;
};

0 comments on commit 26a76e0

Please sign in to comment.
You can’t perform that action at this time.