Skip to content

Commit

Permalink
Menus GUI implementation, styles updates
Browse files Browse the repository at this point in the history
nikitaeverywhere committed Nov 19, 2016

Verified

This commit was signed with the committer’s verified signature.
carlocab Carlo Cabrera
1 parent 63b2be0 commit e32a35d
Showing 18 changed files with 210 additions and 22 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "iknow-entity-browser",
"version": "0.0.6",
"version": "0.0.8",
"description": "Visualizer for iKnow entities",
"main": "gulpfile.babel.js",
"scripts": {
Binary file modified src/static/fonts/iknowentitybrowsericons.eot
Binary file not shown.
1 change: 1 addition & 0 deletions src/static/fonts/iknowentitybrowsericons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/static/fonts/iknowentitybrowsericons.ttf
Binary file not shown.
Binary file modified src/static/fonts/iknowentitybrowsericons.woff
Binary file not shown.
30 changes: 26 additions & 4 deletions src/static/index.html
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>iKnow Entity Browser</title>
<meta name="author" content="ZitRo">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/index.css"/>
<script src="lib/d3.v4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
@@ -13,8 +14,11 @@
<svg id="graph"></svg>
<div id="table">
<i id="tableToggle" class="ui icon-window-list"></i>
<div id="rightTopIcons">
<i id="settingsToggle" class="ui icon-cog"></i>
</div>
<div class="wrapper">
<div>
<div class="controls">
<i id="exportCSV" class="ui icon-page-export-csv"></i>
</div>
<h1>Selected Nodes</h1>
@@ -44,11 +48,29 @@ <h1>Selected Nodes</h1>
<div class="text">Please, select a node.</div>
</div>
<div class="content">
<h1>WELCOME</h1>
<h3>THIS IS A GAME</h3>
<h5>TEST GAME!</h5>
<!--h1>
<span id="nodeDetails-label">Duck</span>
<span style="color: darkgray">ID=<span id="nodeDetails-id">0</span></span>
</h1-->
<table id="nodeDetails-entitiesTable">
<thead>
<tr>
<th>Entity</th>
<th>ID</th>
<th>Frequency</th>
<th>Score</th>
<th>Spread</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>
<div id="settings">
<i id="closeSettingsToggle" class="ui icon-close"></i>
</div>
</div>
</body>
</html>
42 changes: 38 additions & 4 deletions src/static/js/details/index.js
Original file line number Diff line number Diff line change
@@ -3,24 +3,58 @@ import { onSelectionUpdate } from "../selection";

let selectedNode = null;

onSelectionUpdate((selection) => {
onSelectionUpdate((selection, lastNodeSelected) => {

d3.select("#nodeDetailsToggle").classed("disabled", selection.length !== 1);
selectedNode = selection.length === 1 ? selection[0] : null;
d3.select("#nodeDetailsToggle").classed("disabled", selection.length === 0);
selectedNode = lastNodeSelected
? lastNodeSelected
: selection.length > 0
? selection[selection.length - 1]
: null;
updateHeader();

});

function updateHeader () {

let typeName = ((selectedNode || {}).type || "Node".toString());

d3.select("#nodeDetails .header .text").text(
selectedNode
? `Node "${ selectedNode.label }" (${ selectedNode.type }) selected.`
? `${ typeName[0].toUpperCase() + typeName.slice(1) } "${
selectedNode.label }" selected.`
: "Please, select one node."
);

if (!selectedNode) {
d3.select("#nodeDetails").classed("active", model.uiState.detailsToggled = false);
} else {
updateData();
}

}

function updateData () {

if (!selectedNode)
return;

let tableElement = document.querySelector("#nodeDetails-entitiesTable tbody");
// labelElement = document.querySelector("#nodeDetails-label"),
// idElement = document.querySelector("#nodeDetails-id");

// idElement.textContent = selectedNode.id;
// labelElement.textContent = selectedNode.label;

tableElement.textContent = "";
for (let i = 0; i < (selectedNode.entities || []).length; i++) {
let row = tableElement.insertRow(i),
entity = selectedNode.entities[i];
row.insertCell(0).textContent = entity.value;
row.insertCell(1).textContent = entity.id;
row.insertCell(2).textContent = entity.frequency;
row.insertCell(3).textContent = entity.score;
row.insertCell(4).textContent = entity.spread;
}

}
8 changes: 5 additions & 3 deletions src/static/js/graph/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { updateSelectedNodes } from "../tabular";
import { getGraphData } from "../model";
import { updateSelection } from "../selection";
import { updateSelection, setLastSelectedNode } from "../selection";

export function update () {

@@ -76,6 +76,7 @@ export function update () {
node.classed("selected", (p) => p.selected = p.previouslySelected = false)
}
d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel)
setLastSelectedNode(d.selected ? d : null);
updateSelection();
});

@@ -108,9 +109,10 @@ export function update () {
if (!extent)
return;
node.classed("selected", (d) => {
return d.selected = d.previouslySelected ^
(extent[0][0] <= d.x && d.x < extent[1][0]
let selected = (extent[0][0] <= d.x && d.x < extent[1][0]
&& extent[0][1] <= d.y && d.y < extent[1][1]);
if (selected) setLastSelectedNode(d);
return d.selected = d.previouslySelected ^ selected;
});
})
.on("end.brush", () => {
2 changes: 2 additions & 0 deletions src/static/js/index.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { update } from "./graph";
import * as tabular from "./tabular";
import * as details from "./details";
import * as settings from "./settings";

window.init = () => {

update();
tabular.init();
details.init();
settings.init();

};
3 changes: 2 additions & 1 deletion src/static/js/model/index.js
Original file line number Diff line number Diff line change
@@ -13,5 +13,6 @@ export function getGraphData () {

export var uiState = {
tabularToggled: false,
detailsToggled: false
detailsToggled: false,
settingsToggled: false
};
22 changes: 20 additions & 2 deletions src/static/js/selection.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
import * as model from "./model";

let selection = [],
callbacks = [];
callbacks = [],
lastSelectedNode = null;

export function updateSelection () {

selection = model.getGraphData().nodes.filter(node => !!node.selected);

callbacks.forEach(c => c(selection));
if (!selection.length) lastSelectedNode = null;
if (lastSelectedNode && !lastSelectedNode.selected) {
lastSelectedNode = selection[selection.length - 1];
}

callbacks.forEach(
c => c(selection, lastSelectedNode || selection[selection.length - 1] || null)
);

}

export function setLastSelectedNode (node) {

if (node && typeof node.id !== "undefined")
lastSelectedNode = node;
else
lastSelectedNode = null;

}

@@ -25,4 +42,5 @@ export function onSelectionUpdate (callback) {
* This callback is invoked when selection changes.
* @callback selectionCallback
* @param {*[]} nodes - Currently selected nodes.
* @param {*} lastNodeSelected - The last node selected by user.
*/
19 changes: 19 additions & 0 deletions src/static/js/settings/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import * as model from "../model";

function toggleSettings (uiStateModel) {
uiStateModel.settingsToggled = !uiStateModel.settingsToggled;
d3.select("#settings").classed("active", uiStateModel.settingsToggled);
d3.select("#windows").classed("offScreen", uiStateModel.settingsToggled);
}

export function init () {

d3.select("#settingsToggle")
.data([model.uiState])
.on("click", toggleSettings);

d3.select("#closeSettingsToggle")
.data([model.uiState])
.on("click", toggleSettings);

}
4 changes: 3 additions & 1 deletion src/static/scss/const.scss
Original file line number Diff line number Diff line change
@@ -2,4 +2,6 @@ $defaultTransition: all .3s ease;
$defaultPadding: 10px;
$defaultShadow: 0 0 2px gray;

$colorA: #02ad8b;
$colorA: #02ad8b;

$zIndexInterface: 100;
3 changes: 3 additions & 0 deletions src/static/scss/icons.scss
Original file line number Diff line number Diff line change
@@ -85,3 +85,6 @@
.icon-android-options:before {
content: "\6e";
}
.icon-close:before {
content: "\70";
}
13 changes: 12 additions & 1 deletion src/static/scss/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "mixins";
@import "const";

html, body {
position: relative;
@@ -10,15 +11,25 @@ html, body {
}

#windows {

position: relative;
overflow: hidden;
top: 0;
width: 100%;
height: 100%;
@include transition($defaultTransition);

&.offScreen {
top: 100%;
overflow: visible;
}

}

@import "basic";
@import "icons-all";
@import "icons";
@import "graph";
@import "tabular";
@import "nodeDetails";
@import "nodeDetails";
@import "settings";
28 changes: 24 additions & 4 deletions src/static/scss/nodeDetails.scss
Original file line number Diff line number Diff line change
@@ -18,28 +18,32 @@
@include transform(translate(0,0));
}

$headerPadding: 4px;
$headerFontSize: 16px;

> .header {

position: absolute;
left: 0;
right: 0;
top: -28px;
height: 20px;
height: 20px + 2 * $headerPadding;
max-width: 80%;
width: 350px;
margin: 0 auto;
border-radius: 5px 5px 0 0;
background: white;
padding: 4px;
font-size: 16px;
padding: $headerPadding;
font-size: $headerFontSize;
box-shadow: 0 0 2px gray;
box-sizing: border-box;
@include transition($defaultTransition);

> .icons {
display: block;
float: left;
width: 30px;
font-size: 24px;
color: gray;
}

> .text {
@@ -70,4 +74,20 @@

}

&.active {

> .header {
top: 0;
border-radius: 0 0 5px 5px;
max-width: 100%;
width: 100%;
box-shadow: none;
}

> .content {
padding-top: $defaultPadding + $headerFontSize + $headerPadding;
}

}

}
26 changes: 26 additions & 0 deletions src/static/scss/settings.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@import "const";
@import "mixins";

#settings {

position: absolute;
top: -100%;
width: 100%;
height: 100%;
box-sizing: border-box;
background: white;
padding: $defaultPadding;

&.active {

}

}

#closeSettingsToggle {

position: absolute;
right: 7px;
top: 7px;

}
29 changes: 28 additions & 1 deletion src/static/scss/tabular.scss
Original file line number Diff line number Diff line change
@@ -22,9 +22,15 @@

overflow: auto;
height: 100%;
padding: $defaultPadding;
padding: 0 $defaultPadding $defaultPadding $defaultPadding;
box-sizing: border-box;

> .controls {
position: relative;
padding-left: 30px;
top: 5px;
}

> .wrapper {

position: relative;
@@ -40,7 +46,28 @@
}

#tableToggle {

position: absolute;
left: -35px;
top: 6px;
z-index: $zIndexInterface;

&.toggled {
left: 7px;
}

}

#rightTopIcons {

position: absolute;
left: -35px;
top: 36px;
z-index: $zIndexInterface;
@include transition($defaultTransition);

}

#table.active #rightTopIcons {
top: 6px;
}

0 comments on commit e32a35d

Please sign in to comment.