From e32a35d9c4caa56c5b168f7eced6a0c571e2ec53 Mon Sep 17 00:00:00 2001 From: ZitRos Date: Sat, 19 Nov 2016 21:54:51 +0200 Subject: [PATCH] Menus GUI implementation, styles updates --- package.json | 2 +- src/static/fonts/iknowentitybrowsericons.eot | Bin 5048 -> 5256 bytes src/static/fonts/iknowentitybrowsericons.svg | 1 + src/static/fonts/iknowentitybrowsericons.ttf | Bin 4820 -> 5028 bytes src/static/fonts/iknowentitybrowsericons.woff | Bin 3160 -> 3256 bytes src/static/index.html | 30 +++++++++++-- src/static/js/details/index.js | 42 ++++++++++++++++-- src/static/js/graph/index.js | 8 ++-- src/static/js/index.js | 2 + src/static/js/model/index.js | 3 +- src/static/js/selection.js | 22 ++++++++- src/static/js/settings/index.js | 19 ++++++++ src/static/scss/const.scss | 4 +- src/static/scss/icons.scss | 3 ++ src/static/scss/index.scss | 13 +++++- src/static/scss/nodeDetails.scss | 28 ++++++++++-- src/static/scss/settings.scss | 26 +++++++++++ src/static/scss/tabular.scss | 29 +++++++++++- 18 files changed, 210 insertions(+), 22 deletions(-) create mode 100644 src/static/js/settings/index.js create mode 100644 src/static/scss/settings.scss diff --git a/package.json b/package.json index 6bdda98..a7ac777 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/static/fonts/iknowentitybrowsericons.eot b/src/static/fonts/iknowentitybrowsericons.eot index b11aa1df447e15a7e7819bf8d2c785c21b4d1408..0eeee94277fac7d5cd8f085ec03958c6ab4ef6ff 100644 GIT binary patch delta 660 zcmaJ;O=uHQ5dLO&eQ6T0>83VTv$aHH{UJ7+zgjW0g4PO!h?Y{YYL+y%NYX5%NClyu zN-m=Dp;xJh)SFU--nms8y*7W6i|BJ$>i#{M&0}wuQ>hu8mA(&4x@6283PUL=!-3Mrt`ADH`*@yF~8RqZU zu1#1~dt(DC>+@W1nke14`s&N^9H34E+ZQH_*0^`&dq|FwG26g8_dH|W(Nd*g?OrlI zux^O?!Ll`D<1*@8KgPUs$|@J1KAb-f1j2xF)~-~i-w*fP26Shybr2)lvcA^1(tP3@ z{0b+4w0SLRipG&MsJ!;9y%kN&iRD5A7Vt2lx_Ae!o?o=lqYz`jT`b-5^Z zw(cd5i*3n7ABFDu_so_>GATs6@OZUUO7nU+{5LaYbR^<8R?Q(MtSD`a%%zq!oQQ&p<(HqBaz0xnMg?qRF delta 438 zcmYk2Pbh@C`?XqUeWCE|UGRiLRd5&+H)};^e7R#>_US+ULlRjFn|Gm;L>P%K8KPRm!^Q*C|FZ(|M6LpD`6)Vu zA)A$iu;h+1*vZ4`IpM3!1LjH2WFIs{nRRC2^um%KO0R5FH{^+0lp(E&;zeA0abF0} zs1QLpW`w!!8)Y7`=53LO-cx4+Z^{4RHMpy0)H_mzRd}ds6>>DE0(arky_5gH;|~}a BTnqpJ diff --git a/src/static/fonts/iknowentitybrowsericons.svg b/src/static/fonts/iknowentitybrowsericons.svg index 0a22186..d8ee8b4 100644 --- a/src/static/fonts/iknowentitybrowsericons.svg +++ b/src/static/fonts/iknowentitybrowsericons.svg @@ -22,4 +22,5 @@ + diff --git a/src/static/fonts/iknowentitybrowsericons.ttf b/src/static/fonts/iknowentitybrowsericons.ttf index 6269145aed9f27eb95650ec5506d2f1e83cbebb8..9c2d00de6aa7a860c6344f6696d6c9105ae1ccb3 100644 GIT binary patch delta 605 zcmcbjxYh|GUoR&=IZ=U2?K0v-kZem3NLmb0Ipu7c;uaK9Ro4RuT!XO3)0T~7cCeMQW;*!T9=DiFILLdi! z1A7kW!DB*i-^cUYd}ZKf0tz!QTnUSjh0shfvXdBX8HFd?F~%|$OrFE&Xs8NS0`vsP zBMdTNGZ+|BfILu8$uO`mcmQcOAkD}CGOl1U7n3QY&}2KNG9Y=7sb_Kn6W?TCW?3e- zkj**FFS$*b7*rWl8E-S*X3%D^XJAk@(PuO_GX;`r%1Zo<>R^&hR79SU9ZZTD8`(38 zPnO}5uFqvNHfCd!WMk)KF)?A`WCt=aMe=0jj0|cFjO1itjQ#kOLk(y{(E-v5^b0VS z7^Xpe%*Y_VIfdVrkYWje+H1R;2*4S z;mMg)!?V7L;b9tokD)FUS`+A<1FwquNC%%41m(NPy@8Bh*{ zWx)Cw7?OZIP%z0burRm*X*M9u$N(}be=;AF>10=?(#Z#zrc7>NVx1hyEDMy_T*Ca4 ud$X*74odL#fo@>sF} diff --git a/src/static/fonts/iknowentitybrowsericons.woff b/src/static/fonts/iknowentitybrowsericons.woff index 1a4c4535759907eed56f7183b4056c881900a060..cc2227674d82070fa00c33e9d0508acc7334f373 100644 GIT binary patch delta 3156 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 diff --git a/src/static/index.html b/src/static/index.html index d831898..b566b57 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -4,6 +4,7 @@ iKnow Entity Browser + @@ -13,8 +14,11 @@
+
+ +
-
+

Selected Nodes

@@ -44,11 +48,29 @@

Selected Nodes

Please, select a node.
-

WELCOME

-

THIS IS A GAME

-
TEST GAME!
+ + + + + + + + + + + + + + +
EntityIDFrequencyScoreSpread
+
+ +
\ No newline at end of file diff --git a/src/static/js/details/index.js b/src/static/js/details/index.js index 351fac4..d932cce 100644 --- a/src/static/js/details/index.js +++ b/src/static/js/details/index.js @@ -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; } } diff --git a/src/static/js/graph/index.js b/src/static/js/graph/index.js index 2734e45..358bcc6 100644 --- a/src/static/js/graph/index.js +++ b/src/static/js/graph/index.js @@ -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", () => { diff --git a/src/static/js/index.js b/src/static/js/index.js index 106ee08..790ff61 100644 --- a/src/static/js/index.js +++ b/src/static/js/index.js @@ -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(); }; \ No newline at end of file diff --git a/src/static/js/model/index.js b/src/static/js/model/index.js index e7ed5f8..e7bda0c 100644 --- a/src/static/js/model/index.js +++ b/src/static/js/model/index.js @@ -13,5 +13,6 @@ export function getGraphData () { export var uiState = { tabularToggled: false, - detailsToggled: false + detailsToggled: false, + settingsToggled: false }; diff --git a/src/static/js/selection.js b/src/static/js/selection.js index 934f58f..9956db6 100644 --- a/src/static/js/selection.js +++ b/src/static/js/selection.js @@ -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. */ \ No newline at end of file diff --git a/src/static/js/settings/index.js b/src/static/js/settings/index.js new file mode 100644 index 0000000..d31e1af --- /dev/null +++ b/src/static/js/settings/index.js @@ -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); + +} \ No newline at end of file diff --git a/src/static/scss/const.scss b/src/static/scss/const.scss index fe9d402..28a869f 100644 --- a/src/static/scss/const.scss +++ b/src/static/scss/const.scss @@ -2,4 +2,6 @@ $defaultTransition: all .3s ease; $defaultPadding: 10px; $defaultShadow: 0 0 2px gray; -$colorA: #02ad8b; \ No newline at end of file +$colorA: #02ad8b; + +$zIndexInterface: 100; \ No newline at end of file diff --git a/src/static/scss/icons.scss b/src/static/scss/icons.scss index 84ca814..fb5e111 100644 --- a/src/static/scss/icons.scss +++ b/src/static/scss/icons.scss @@ -85,3 +85,6 @@ .icon-android-options:before { content: "\6e"; } +.icon-close:before { + content: "\70"; +} diff --git a/src/static/scss/index.scss b/src/static/scss/index.scss index fee36b3..88c69a5 100644 --- a/src/static/scss/index.scss +++ b/src/static/scss/index.scss @@ -1,4 +1,5 @@ @import "mixins"; +@import "const"; html, body { position: relative; @@ -10,10 +11,19 @@ html, body { } #windows { + position: relative; overflow: hidden; + top: 0; width: 100%; height: 100%; + @include transition($defaultTransition); + + &.offScreen { + top: 100%; + overflow: visible; + } + } @import "basic"; @@ -21,4 +31,5 @@ html, body { @import "icons"; @import "graph"; @import "tabular"; -@import "nodeDetails"; \ No newline at end of file +@import "nodeDetails"; +@import "settings"; \ No newline at end of file diff --git a/src/static/scss/nodeDetails.scss b/src/static/scss/nodeDetails.scss index 57b29d9..16f5997 100644 --- a/src/static/scss/nodeDetails.scss +++ b/src/static/scss/nodeDetails.scss @@ -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; + } + + } + } \ No newline at end of file diff --git a/src/static/scss/settings.scss b/src/static/scss/settings.scss new file mode 100644 index 0000000..d377909 --- /dev/null +++ b/src/static/scss/settings.scss @@ -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; + +} \ No newline at end of file diff --git a/src/static/scss/tabular.scss b/src/static/scss/tabular.scss index 58a8058..c6325df 100644 --- a/src/static/scss/tabular.scss +++ b/src/static/scss/tabular.scss @@ -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; } \ No newline at end of file