Skip to content

Commit 791fffa

Browse files
nikitaeverywherenikitaeverywhere
committed
Design enhancements, CSV data export
1 parent 60a3add commit 791fffa

14 files changed

+171
-38
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.3",
3+
"version": "0.0.4",
44
"description": "Visualizer for iKnow entities",
55
"main": "gulpfile.babel.js",
66
"scripts": {

‎src/static/fonts/iknowentitybrowsericons.eot

2.87 KB
Binary file not shown.

‎src/static/fonts/iknowentitybrowsericons.svg

+14
Loading

‎src/static/fonts/iknowentitybrowsericons.ttf

2.87 KB
Binary file not shown.

‎src/static/fonts/iknowentitybrowsericons.woff

1.94 KB
Binary file not shown.

‎src/static/index.html

+20-15
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,30 @@
1212
<div id="windows">
1313
<svg id="graph"></svg>
1414
<div id="table">
15-
<h1>Selected Nodes</h1>
15+
<i id="tableToggle" class="ui icon-window-list"></i>
1616
<div class="wrapper">
17-
<table>
18-
<thead>
19-
<tr>
20-
<th>ID</th>
21-
<th>Label</th>
22-
<th>Frequency</th>
23-
</tr>
24-
</thead>
25-
<tbody>
17+
<div>
18+
<i id="exportCSV" class="ui icon-page-export-csv"></i>
19+
</div>
20+
<h1>Selected Nodes</h1>
21+
<div class="wrapper">
22+
<table>
23+
<thead>
24+
<tr>
25+
<th>ID</th>
26+
<th>Label</th>
27+
<th>Score</th>
28+
<th>Frequency</th>
29+
<th>Spread</th>
30+
</tr>
31+
</thead>
32+
<tbody>
2633

27-
</tbody>
28-
</table>
34+
</tbody>
35+
</table>
36+
</div>
2937
</div>
3038
</div>
3139
</div>
32-
<div class="uiIconGroup topRight">
33-
<i id="tableToggle" class="ui icon-window-list"></i>
34-
</div>
3540
</body>
3641
</html>

‎src/static/js/export.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @param {*[][]} dataArray - Table to be exported.
3+
*/
4+
export function csv (dataArray = []) {
5+
6+
console.log(dataArray);
7+
let csvContent = "data:text/csv;charset=utf-8,";
8+
9+
dataArray.forEach((infoArray, index) => {
10+
11+
let dataString = infoArray.join(",");
12+
csvContent += index < dataArray.length ? dataString + "\n" : dataString;
13+
14+
});
15+
16+
let encodedUri = encodeURI(csvContent),
17+
link = document.createElement("a");
18+
19+
link.setAttribute("href", encodedUri);
20+
link.setAttribute("download", "entityGraph.csv");
21+
document.body.appendChild(link);
22+
link.click();
23+
24+
setTimeout(() => link.parentNode.removeChild(link), 10);
25+
26+
}

‎src/static/js/index.js

+24-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
import sampleData from "./sample_output2.json";
2+
import { uiState } from "./ui";
3+
import { csv } from "./export";
24

35
var graph = preprocess(sampleData.graph);
46

57
function preprocess (graph) {
6-
graph.nodes.forEach(node => node.radius = 5 + Math.sqrt(node.entities[0].frequency || 25));
8+
graph.nodes.forEach(node => node.radius = 5 + Math.sqrt(node.entities[0].score/4 || 25));
79
return graph;
810
}
911

1012
function updateSelectedNodes () {
11-
let data = graph.nodes.filter(node => !!node.selected),
13+
if (!uiState.tableToggled)
14+
return;
15+
let data = graph.nodes.filter(node => !!node.selected).sort((a, b) =>
16+
a.entities[0].score > b.entities[0].score ? -1 : 1
17+
),
1218
table = document.querySelector("#table table tbody");
1319
table.textContent = "";
1420
for (let i = 0; i < data.length; i++) {
1521
let row = table.insertRow(i),
1622
node = data[i];
1723
row.insertCell(0).textContent = node.id;
1824
row.insertCell(1).textContent = node.label;
19-
row.insertCell(2).textContent = node.entities[0].frequency;
25+
row.insertCell(2).textContent = node.entities[0].score;
26+
row.insertCell(3).textContent = node.entities[0].frequency;
27+
row.insertCell(4).textContent = node.entities[0].spread;
2028
}
2129
}
2230

@@ -91,7 +99,7 @@ window.init = () => {
9199
if (!ctrlKey) {
92100
node.classed("selected", (p) => p.selected = p.previouslySelected = false)
93101
}
94-
d3.select(this).classed("selected", d.selected = !d.previouslySelected);
102+
d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel)
95103
updateSelectedNodes();
96104
});
97105

@@ -197,10 +205,18 @@ window.init = () => {
197205
}
198206

199207
d3.select("#tableToggle")
200-
.data([{ toggled: false }])
201-
.on("click", (d) => {
202-
d.toggled = !d.toggled;
203-
d3.select("#table").classed("active", d.toggled);
208+
.data([uiState])
209+
.on("click", function (d) {
210+
d.tableToggled = !d.tableToggled;
211+
d3.select(this).classed("toggled", d.tableToggled);
212+
d3.select("#table").classed("active", d.tableToggled);
213+
updateSelectedNodes();
204214
});
205215

216+
d3.select("#exportCSV").on("click", () => {
217+
csv([].slice.call(document.querySelector("#table table").rows).map(row =>
218+
[].slice.call(row.cells).map(cell => cell.textContent)
219+
));
220+
});
221+
206222
};

‎src/static/js/ui.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export var uiState = {
2+
tableToggled: false
3+
};

‎src/static/scss/basic.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,13 @@ table {
2020
}
2121

2222
th {
23-
background-color: rgb(2, 173, 139);
23+
background-color: $colorA;
2424
color: white;
2525
text-shadow: 0 1px 1px black;
2626
}
2727

28+
}
29+
30+
h1, h2, h3, h4, h5, h6 {
31+
margin: 0 0 .3em 0;
2832
}

‎src/static/scss/const.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
$defaultTransition: all .3s ease;
22
$defaultPadding: 10px;
3-
$defaultShadow: 0 1px 2px gray;
3+
$defaultShadow: 0 1px 2px gray;
4+
5+
$colorA: #02ad8b;

‎src/static/scss/icons-all.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
@import "mixins";
2+
@import "const";
23

34
[class*="icon-"] {
45
@include user-select(none);
6+
@include transition($defaultTransition);
57
cursor: pointer;
6-
&.ui { font-size: 24pt; }
8+
&.ui { font-size: 28px; }
9+
&:hover { color: $colorA; }
10+
&.toggled {
11+
color: $colorA;
12+
&:hover { color: black; }
13+
}
714
}
815

916
.uiIconGroup {

‎src/static/scss/icons.scss

+43-1
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,46 @@
4242

4343
.icon-window-list:before {
4444
content: "\61";
45-
}
45+
}
46+
.icon-page-export-csv:before {
47+
content: "\62";
48+
}
49+
.icon-search-plus:before {
50+
content: "\63";
51+
}
52+
.icon-search-minus:before {
53+
content: "\64";
54+
}
55+
.icon-search:before {
56+
content: "\65";
57+
}
58+
.icon-ios-circle-outline:before {
59+
content: "\66";
60+
}
61+
.icon-ios-circle-filled:before {
62+
content: "\67";
63+
}
64+
.icon-th-list:before {
65+
content: "\68";
66+
}
67+
.icon-check-circle:before {
68+
content: "\69";
69+
}
70+
.icon-circle:before {
71+
content: "\6a";
72+
}
73+
.icon-cog:before {
74+
content: "\6b";
75+
}
76+
.icon-settings:before {
77+
content: "\6c";
78+
}
79+
.icon-filter:before {
80+
content: "\6d";
81+
}
82+
.icon-wrench:before {
83+
content: "\6f";
84+
}
85+
.icon-android-options:before {
86+
content: "\6e";
87+
}

‎src/static/scss/table.scss

+24-10
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,42 @@
55

66
position: absolute;
77
top: 0;
8-
left: 0;
9-
width: 50%;
8+
right: 0;
109
height: 100%;
10+
max-width: 100%;
1111
box-sizing: border-box;
12-
padding: $defaultPadding;
1312
background: white;
14-
overflow: auto;
13+
overflow: visible;
1514
box-shadow: $defaultShadow;
1615
@include transition($defaultTransition);
17-
@include transform(translate(200%,0));
16+
@include transform(translate(100%,0));
1817
&.active {
19-
@include transform(translate(100%,0));
18+
@include transform(translate(0,0));
2019
}
2120

22-
.wrapper {
21+
> .wrapper {
2322

24-
position: relative;
23+
overflow: auto;
24+
height: 100%;
25+
padding: $defaultPadding;
26+
box-sizing: border-box;
27+
28+
> .wrapper {
29+
30+
position: relative;
31+
32+
table {
33+
width: 100%;
34+
}
2535

26-
table {
27-
width: 100%;
2836
}
2937

3038
}
3139

40+
}
41+
42+
#tableToggle {
43+
position: absolute;
44+
left: -35px;
45+
top: 6px;
3246
}

0 commit comments

Comments
 (0)