Skip to content

Commit e32a35d

Browse files
nikitaeverywherenikitaeverywhere
committed
Menus GUI implementation, styles updates
1 parent 63b2be0 commit e32a35d

18 files changed

+210
-22
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "iknow-entity-browser",
3-
"version": "0.0.6",
3+
"version": "0.0.8",
44
"description": "Visualizer for iKnow entities",
55
"main": "gulpfile.babel.js",
66
"scripts": {

‎src/static/fonts/iknowentitybrowsericons.eot

208 Bytes
Binary file not shown.

‎src/static/fonts/iknowentitybrowsericons.svg

+1
Loading

‎src/static/fonts/iknowentitybrowsericons.ttf

208 Bytes
Binary file not shown.

‎src/static/fonts/iknowentitybrowsericons.woff

96 Bytes
Binary file not shown.

‎src/static/index.html

+26-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<title>iKnow Entity Browser</title>
66
<meta name="author" content="ZitRo">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
78
<link rel="stylesheet" href="css/index.css"/>
89
<script src="lib/d3.v4.min.js"></script>
910
<script type="text/javascript" src="js/index.js"></script>
@@ -13,8 +14,11 @@
1314
<svg id="graph"></svg>
1415
<div id="table">
1516
<i id="tableToggle" class="ui icon-window-list"></i>
17+
<div id="rightTopIcons">
18+
<i id="settingsToggle" class="ui icon-cog"></i>
19+
</div>
1620
<div class="wrapper">
17-
<div>
21+
<div class="controls">
1822
<i id="exportCSV" class="ui icon-page-export-csv"></i>
1923
</div>
2024
<h1>Selected Nodes</h1>
@@ -44,11 +48,29 @@ <h1>Selected Nodes</h1>
4448
<div class="text">Please, select a node.</div>
4549
</div>
4650
<div class="content">
47-
<h1>WELCOME</h1>
48-
<h3>THIS IS A GAME</h3>
49-
<h5>TEST GAME!</h5>
51+
<!--h1>
52+
<span id="nodeDetails-label">Duck</span>
53+
<span style="color: darkgray">ID=<span id="nodeDetails-id">0</span></span>
54+
</h1-->
55+
<table id="nodeDetails-entitiesTable">
56+
<thead>
57+
<tr>
58+
<th>Entity</th>
59+
<th>ID</th>
60+
<th>Frequency</th>
61+
<th>Score</th>
62+
<th>Spread</th>
63+
</tr>
64+
</thead>
65+
<tbody>
66+
67+
</tbody>
68+
</table>
5069
</div>
5170
</div>
71+
<div id="settings">
72+
<i id="closeSettingsToggle" class="ui icon-close"></i>
73+
</div>
5274
</div>
5375
</body>
5476
</html>

‎src/static/js/details/index.js

+38-4
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,58 @@ import { onSelectionUpdate } from "../selection";
33

44
let selectedNode = null;
55

6-
onSelectionUpdate((selection) => {
6+
onSelectionUpdate((selection, lastNodeSelected) => {
77

8-
d3.select("#nodeDetailsToggle").classed("disabled", selection.length !== 1);
9-
selectedNode = selection.length === 1 ? selection[0] : null;
8+
d3.select("#nodeDetailsToggle").classed("disabled", selection.length === 0);
9+
selectedNode = lastNodeSelected
10+
? lastNodeSelected
11+
: selection.length > 0
12+
? selection[selection.length - 1]
13+
: null;
1014
updateHeader();
1115

1216
});
1317

1418
function updateHeader () {
1519

20+
let typeName = ((selectedNode || {}).type || "Node".toString());
21+
1622
d3.select("#nodeDetails .header .text").text(
1723
selectedNode
18-
? `Node "${ selectedNode.label }" (${ selectedNode.type }) selected.`
24+
? `${ typeName[0].toUpperCase() + typeName.slice(1) } "${
25+
selectedNode.label }" selected.`
1926
: "Please, select one node."
2027
);
2128

2229
if (!selectedNode) {
2330
d3.select("#nodeDetails").classed("active", model.uiState.detailsToggled = false);
31+
} else {
32+
updateData();
33+
}
34+
35+
}
36+
37+
function updateData () {
38+
39+
if (!selectedNode)
40+
return;
41+
42+
let tableElement = document.querySelector("#nodeDetails-entitiesTable tbody");
43+
// labelElement = document.querySelector("#nodeDetails-label"),
44+
// idElement = document.querySelector("#nodeDetails-id");
45+
46+
// idElement.textContent = selectedNode.id;
47+
// labelElement.textContent = selectedNode.label;
48+
49+
tableElement.textContent = "";
50+
for (let i = 0; i < (selectedNode.entities || []).length; i++) {
51+
let row = tableElement.insertRow(i),
52+
entity = selectedNode.entities[i];
53+
row.insertCell(0).textContent = entity.value;
54+
row.insertCell(1).textContent = entity.id;
55+
row.insertCell(2).textContent = entity.frequency;
56+
row.insertCell(3).textContent = entity.score;
57+
row.insertCell(4).textContent = entity.spread;
2458
}
2559

2660
}

‎src/static/js/graph/index.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { updateSelectedNodes } from "../tabular";
22
import { getGraphData } from "../model";
3-
import { updateSelection } from "../selection";
3+
import { updateSelection, setLastSelectedNode } from "../selection";
44

55
export function update () {
66

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

@@ -108,9 +109,10 @@ export function update () {
108109
if (!extent)
109110
return;
110111
node.classed("selected", (d) => {
111-
return d.selected = d.previouslySelected ^
112-
(extent[0][0] <= d.x && d.x < extent[1][0]
112+
let selected = (extent[0][0] <= d.x && d.x < extent[1][0]
113113
&& extent[0][1] <= d.y && d.y < extent[1][1]);
114+
if (selected) setLastSelectedNode(d);
115+
return d.selected = d.previouslySelected ^ selected;
114116
});
115117
})
116118
.on("end.brush", () => {

‎src/static/js/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { update } from "./graph";
22
import * as tabular from "./tabular";
33
import * as details from "./details";
4+
import * as settings from "./settings";
45

56
window.init = () => {
67

78
update();
89
tabular.init();
910
details.init();
11+
settings.init();
1012

1113
};

‎src/static/js/model/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ export function getGraphData () {
1313

1414
export var uiState = {
1515
tabularToggled: false,
16-
detailsToggled: false
16+
detailsToggled: false,
17+
settingsToggled: false
1718
};

‎src/static/js/selection.js

+20-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
import * as model from "./model";
22

33
let selection = [],
4-
callbacks = [];
4+
callbacks = [],
5+
lastSelectedNode = null;
56

67
export function updateSelection () {
78

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

10-
callbacks.forEach(c => c(selection));
11+
if (!selection.length) lastSelectedNode = null;
12+
if (lastSelectedNode && !lastSelectedNode.selected) {
13+
lastSelectedNode = selection[selection.length - 1];
14+
}
15+
16+
callbacks.forEach(
17+
c => c(selection, lastSelectedNode || selection[selection.length - 1] || null)
18+
);
19+
20+
}
21+
22+
export function setLastSelectedNode (node) {
23+
24+
if (node && typeof node.id !== "undefined")
25+
lastSelectedNode = node;
26+
else
27+
lastSelectedNode = null;
1128

1229
}
1330

@@ -25,4 +42,5 @@ export function onSelectionUpdate (callback) {
2542
* This callback is invoked when selection changes.
2643
* @callback selectionCallback
2744
* @param {*[]} nodes - Currently selected nodes.
45+
* @param {*} lastNodeSelected - The last node selected by user.
2846
*/

‎src/static/js/settings/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as model from "../model";
2+
3+
function toggleSettings (uiStateModel) {
4+
uiStateModel.settingsToggled = !uiStateModel.settingsToggled;
5+
d3.select("#settings").classed("active", uiStateModel.settingsToggled);
6+
d3.select("#windows").classed("offScreen", uiStateModel.settingsToggled);
7+
}
8+
9+
export function init () {
10+
11+
d3.select("#settingsToggle")
12+
.data([model.uiState])
13+
.on("click", toggleSettings);
14+
15+
d3.select("#closeSettingsToggle")
16+
.data([model.uiState])
17+
.on("click", toggleSettings);
18+
19+
}

‎src/static/scss/const.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@ $defaultTransition: all .3s ease;
22
$defaultPadding: 10px;
33
$defaultShadow: 0 0 2px gray;
44

5-
$colorA: #02ad8b;
5+
$colorA: #02ad8b;
6+
7+
$zIndexInterface: 100;

‎src/static/scss/icons.scss

+3
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,6 @@
8585
.icon-android-options:before {
8686
content: "\6e";
8787
}
88+
.icon-close:before {
89+
content: "\70";
90+
}

‎src/static/scss/index.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "mixins";
2+
@import "const";
23

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

1213
#windows {
14+
1315
position: relative;
1416
overflow: hidden;
17+
top: 0;
1518
width: 100%;
1619
height: 100%;
20+
@include transition($defaultTransition);
21+
22+
&.offScreen {
23+
top: 100%;
24+
overflow: visible;
25+
}
26+
1727
}
1828

1929
@import "basic";
2030
@import "icons-all";
2131
@import "icons";
2232
@import "graph";
2333
@import "tabular";
24-
@import "nodeDetails";
34+
@import "nodeDetails";
35+
@import "settings";

‎src/static/scss/nodeDetails.scss

+24-4
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,32 @@
1818
@include transform(translate(0,0));
1919
}
2020

21+
$headerPadding: 4px;
22+
$headerFontSize: 16px;
23+
2124
> .header {
2225

2326
position: absolute;
2427
left: 0;
2528
right: 0;
2629
top: -28px;
27-
height: 20px;
30+
height: 20px + 2 * $headerPadding;
2831
max-width: 80%;
2932
width: 350px;
3033
margin: 0 auto;
3134
border-radius: 5px 5px 0 0;
3235
background: white;
33-
padding: 4px;
34-
font-size: 16px;
36+
padding: $headerPadding;
37+
font-size: $headerFontSize;
3538
box-shadow: 0 0 2px gray;
39+
box-sizing: border-box;
40+
@include transition($defaultTransition);
3641

3742
> .icons {
3843
display: block;
3944
float: left;
4045
width: 30px;
4146
font-size: 24px;
42-
color: gray;
4347
}
4448

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

7175
}
7276

77+
&.active {
78+
79+
> .header {
80+
top: 0;
81+
border-radius: 0 0 5px 5px;
82+
max-width: 100%;
83+
width: 100%;
84+
box-shadow: none;
85+
}
86+
87+
> .content {
88+
padding-top: $defaultPadding + $headerFontSize + $headerPadding;
89+
}
90+
91+
}
92+
7393
}

‎src/static/scss/settings.scss

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import "const";
2+
@import "mixins";
3+
4+
#settings {
5+
6+
position: absolute;
7+
top: -100%;
8+
width: 100%;
9+
height: 100%;
10+
box-sizing: border-box;
11+
background: white;
12+
padding: $defaultPadding;
13+
14+
&.active {
15+
16+
}
17+
18+
}
19+
20+
#closeSettingsToggle {
21+
22+
position: absolute;
23+
right: 7px;
24+
top: 7px;
25+
26+
}

0 commit comments

Comments
 (0)