From aa27f8b4e43e70d94e45d794e552d0e8219078f0 Mon Sep 17 00:00:00 2001 From: ZitRos Date: Sun, 22 Jan 2017 22:20:20 +0200 Subject: [PATCH] Adding and removing nodes from tabular view --- package.json | 2 +- src/static/fonts/iknowentitybrowsericons.eot | Bin 6116 -> 6304 bytes src/static/fonts/iknowentitybrowsericons.svg | 1 + src/static/fonts/iknowentitybrowsericons.ttf | Bin 5888 -> 6076 bytes src/static/fonts/iknowentitybrowsericons.woff | Bin 3920 -> 4012 bytes src/static/index.html | 1 + src/static/js/graph/index.js | 2 +- src/static/js/tabular/index.js | 21 ++++++- src/static/scss/basic.scss | 2 +- src/static/scss/icons.scss | 3 + src/static/scss/tabular.scss | 52 ++++++++++++++++++ 11 files changed, 80 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 698370b..a1754dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iknow-entity-browser", - "version": "0.5.12", + "version": "0.6.0", "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 6c162f1e0831de4d33a0d0a6c0b9cffe210df670..37cef04148625296c8f37d9ee431c4d518d5c22e 100644 GIT binary patch delta 670 zcmZ`$J!n%=6#mZpxrwG=hveOeNwm@AA(0qwYEt~E4sEsI@%@!g0PV0f=e$O}+l9%sW!8r0=I_kT zxL-ZMdIu{Jw=CCTHNuHRU`9DH@re6_nTGI%+-RoTt@|Mu8%N3vgj>T zpWOex4n!{l#zcLo(Zp7j0Eeey2aI|q-P-E)1LuAsVsHZZ{9^rPe>6Zpn1|t)^)Jd% zT&IoalNrwPoqbFA(||>0y}1ckxXMv*B){_(zp!__Aof%in+d7o<^z)YnYm?!`6+8n z%N|@YkU@sFX&X6Q05YeC-E5Bbd^#kObkz4z>71pQ?^U^Uo{FkGO3{!AiL{$_v%}?5 zxum2csb!1Mq_D%s!nT+U3Hu*20*2D|0CV&oaz_*UHW$PxLd@>U=Y~3AsXvWK3_ewtSFlig;jNPp1$=j`Vio^$YrZd~<6z3smg_LT@U$w2X_- z2;g`m{RxbA3M2V-Ia$&52D?B9z(e-B@IMP+&%~`L%Dli@n93W4<6+Z8Z!U(r*bP`D zX7+VM!YF0yZyj{3(2VBN5i^l-NZ9m(yx`ShmVqCMcW29zT*-Y7k2i?hKZDAeOIU`T zjhCFb3_*p!68sM*ri`$h1(|AVdv}r!g7Yt}& h{74&2;3HxkjkvG+`K`J`Q}YRDEmL^LS!4hAH{Z;*Yt#S$ diff --git a/src/static/fonts/iknowentitybrowsericons.svg b/src/static/fonts/iknowentitybrowsericons.svg index 6df0a74..5c9aa6d 100644 --- a/src/static/fonts/iknowentitybrowsericons.svg +++ b/src/static/fonts/iknowentitybrowsericons.svg @@ -27,4 +27,5 @@ + diff --git a/src/static/fonts/iknowentitybrowsericons.ttf b/src/static/fonts/iknowentitybrowsericons.ttf index 9af7921c32106249afa638bea145377115198255..0650f6bafa79a06cdb42f395d9ecd2e34ab6995f 100644 GIT binary patch delta 716 zcmZ`$OK1~O6g}_FC#gYOaXvzmTC{0|NE)ZLt<~zLi49mW;#f^_G~x)4F=%AK1k)SJoJh2X%w_ndP-^X_|YVq>TY2H+rE zNSI5fug$Co{W)MhB{h6$DwReGDsh*1|LoNvYxY;}8Njl{uP>DCYU;z~kHmM#>PvR5 zy0=G@U^XZpTq@mJoR5980cjQJdE*r9{DIo~TgrVQ8+DvQ)0PdcP_stDfK#qF0$Jt~ ze@%S6R9Uc-`S>mk$Pu^7cB6_s9#DRqc>l6pEXy#;8~08dvdwK}#6w30zT#E!Qd zF*D}8y4ijHCqkTL;M2=iu@iZ#xW*>gQE`F2$V5q_!+RF?dVytPGy!4AxI$5-$j~0M zLaVkv+mG!knM{HyM)-YZiuZg=4${HbS0$xqf+LD3+h*H{<023}GZGt&vyML=P$TSw z=QYzf$8^tIW22L7*cub3yNo$kQ3DxO2@V7mH4{*kf9Q=!pOw6uwE7}{!H@q`b{ezd zaJMEN9vN&7W7FSNhRII(SV4&8e5{iGsC^G|7byvE$2R6TglS)wu!wmd%T)8*#|jKK zhCzXsPbdRxxN2Ko!>E!bm(m zHncKXe-6kW%mxPf`s3(>hx~#(I6T@E8-AQR1jGdSc*0Vd{^RC0@}G?CoLb5hi<|_> z8Su`{ug-2fyfXpUHc)M*l4_=+OnPYnEreA z;YH^!R2obJ*SUP*=``|%UC|}{x?6l4vQrdaia_Zuut;WqQ2-{!d3w2@hA6Diti2Qx zHYy$w+r3~fbi~LB=r6{%&)Y6{wI1}!Ke~W$PXGV_ diff --git a/src/static/fonts/iknowentitybrowsericons.woff b/src/static/fonts/iknowentitybrowsericons.woff index 51f69569ff457fb7487c283ebac3f8325c10a4c7..ab7334cf2bd0660eb60750ed00399ec532126850 100644 GIT binary patch delta 3888 zcmXY!byyQz8;6HBOypPLl|AcV7!#lFlq{dNOwthNQZ?;*C>f0 z-F$n$?>pCZ|M9!eb)M@v=lu12y;si3=&uWd=^7g90su7S07?LUF~gG?c~Dfm004cq zW58rB3}&be004#YTda84eN#Y%YAUKQywk#G4m?}{D1b=UKu8qtT=DrC9&0@g%MW%4 z8xOqujL!%FfWSvKTe$-6U}FyeP=oP~ACDx3cU=n{FY!(fpV{$%iBL>;2;m5y0KELS zAOw#v@e2YZ!X^M;kUABgN&X9y9>C28;edBp_0d{ShYLUm zAPC6%V(b#fHszcBayMzJY)qC$M4PfZ0Sk^w{;k14>2dJbD70zw!5&RfdO7MR0_0_^ z>1>77XVo7$rP}aamxl@tS)gmvTZf0y#^3vu;+pjTa1v9nc+i$8hVlTZ2osV?sl@rB z0Kj~wDAVoaXQ-eixi)Xy>v?b7`8c;Wkj6k<8}%Rr>6h>Uqy5F;9S*YbJ2Kk-iL6ws z;x{Ox_O&){1lr!Y@a=N68YQdIyGhN=5n>;4F|wg>t`?d|l4lc|Jv$=Wy7l*szroJ| z{~r*An#`H@ONI#~`hwC52#wcoE$;kuqL*l(``oIiLn$~mFyTVb7bB~zt^dOiZCj#R zs+d+n;_E5fkt8c2C3R?zlstPcmu!lWM#t$aTgyI`6Jg28&VE}^h{`@<$unU1wyFzT z9ojtVtJs*^vA^2vQQ-sS$hU-!mPCUyvoNaX=Z5V5Odqn%Fw!Eir3ny-aFKasb$ZecjiSWaxe$&EGNplCccI) z{6hwhd2q>TM1rOs;(9EK4kJWU6Y7wT#E|53d{;D(0E0-eQ@u3ku?VG>oN}FoLx*F< zbBo#-o_PVv+1mZ&^3#!<%GUY4oZyd(3)7^sAyr56*^2_GYe?l{`b}L2O}@Ka=QL*` z;DESaFBEyE_3WVCh%jW%LIxSj$?L<_?xcJn;NN|^w-QgrA6;K-<`)Zlnlu4@&VN5z z^I_8rc$Mr=Yw8dU6xzmMZNKdoz4W1 zEfy$tTR>11pDtOO{REK4`%?3RPHJrfmj#2_$qK8Qw=TJ)EQcLTfuRjFZO6OD#WB?G zDUgtfa!ZpIqN?ucVN>V&-(&4r&JLy!R?2#N37hfmC*TPCXmBjVnGitx@(ro&FGeSntc891+lSsa%sCfG(y)TEUlQ5Ie=q<~lDfU{Kf1y`b4^y{L4Q3YZvE6zMUUr?%D_=8JAu=-}DTa;p?u{M(gCq`abFhSNci<%7-+B@4T)w|$ zz`18O`fUGN;25HBh^Ohpxdd}1tP|o8qQ8RXg2e8G@x<_K;kI#hVD%(oTE(9#ACP-A zam9~GOsq?zY?A5)^VkXmR#aZ`u&o$KPz4bRLO*Xj|O?@KiEj;m1p?&T%%H_ z$GyyZ%W0M^9SV3d3gS{9YC1$SJUe0!AHlrkNj*0g%n-^TvP@3}1PRj=1U9_)k5PFT zJE&{9#LU@$ZPLjn(1(x#QJPQjV$+AHppN z@!N=l3?`%9M2G4>jq#P&VuY|1FN5_3oWF=JEb0q%)*qN|tChK=tGbr`nMt>slo^qv znj}eiOTtIMao>B7JOQZU1<;Y%Rl}?>h@r zZ2xy~qYJUu7LVO#X$j`W0)VRbS(r1oFjo4~`J&aK5-tIcbxcO$f&%_fF!b?A2O4ol zo%P;t$>)nJg~!A!8zhrOnL70c-u}LXseC35??sCLk5L6y<_{ z;zqNPGFyl7FDs3yh8ra zf^vevf5qrGc!4r+PZ93oXg?;GkPuMDx#Sk-4yS#9B|ns012(-r)K9g_<<+W3NSd5^ z1Z&?`qN6}Vk5lq^nD~gFPOJ^fB-~}>nsD!`x4Mq__Lq6zk_AJ?>XbIx#_3c~re;%^ zq{27a_56;3rr5l_6skFSF~ZlxcbvbotqnP|%j#PZ!^RQxWfml}=W9iNd-7x8b~|nV z?!f&V&aK5GTe@4|##O-$P55-t^>mQQK;Y+7BrU5-r9HY?>xM&uBWk4f#E4 zW=xEPAKU*ynbCoWn-TX34Av1aKdpfUzm0V^Ix|UkHgZfhLL}<}UhIwvj9mZaR1+Nd ziDQrFS?vzj58a*t->&93dEz6BJ)R;B(r>?wGmmjze0OBTsf?O@ZrEO5aWUNRhn)Vlyy{|3z7$s$ zP=1=W&`a0;apeQ=wG>oU4-~BKZ^)qNkC-$X>YR=%Sjk-TIWh$e-bR>zjioL#2DnCE zr8<>jS^`-VK}VwRE;0rwifhr3t&XmTuV0SmuA4k0#c2DYPdsWXUp)?Gxu(Q@dHe9Z zQ34f;N)rP!FsvN!KgmkH8>uQXk)i2YdZ4?vxS|S$5hKr%ucAyLKdJ;QqbRG1jOt5U zOo7*x?|%P&U%4vP=r;DU_SyU^Rz#jd)~|8ExhFIG+#5GGNxw(f@B#NlTLu5hs|R@R=j4^bEmd*8S|S}!Ggd?NE+y{`YP(cHWTW*5V%S8`GW(v2__}hHED@)i4BgAk2gFkazaLL26%lVGj`rP-c??~_56t}vv z>EoWjWt^r5H%e0JlSrZd^J+~|X#+2h z@Ybt4+oy78UBhCV*49wz*u4rT<7vN^y00pY8SA4golqwF0u@j0k-{OYs+N?cYTsR6 zg4U{=N?|g-Px2wvzs^cIgnbEVpfxBFHBY(Yz#kSh#yjbItusvDoGV|JZm^!e`qh2S z?CcsA3i^SJ8cD5fMn26DSWeQ7<c?QC`d5sr)RP+K)mz4JGlfzeNb3%4 zkF?o4?Xa4_Y3#V*xM0$;6)L;C&X+JXR#*Lx-27TvuokFc1SsRdCEf%H??^(i1Bq$N zXu23(%go(v` z`K9NtNZKeekK+Zu_kS;gGfAQ-LLQkOY=0lWeY2=S{c})9=<3Gc+C$;$=hAt{-F_D2 z)0V?^Iow=Z^X-TBpi|sp>*_yI{Wr)-d@> z-1y$~Ig0P+S4I335s+nPZEbB22or0F9S`4pT;}K43kN)xAnp3!p1rm85}_?Q39YrQ zHIedjE=PhxW&p7W;8_YCP!}}<4CSI#;SBqD*3BtZR!hjX?|9w9Lmc3V9vii{5)EB% z2YtzdzSo$qjyCgD<=$$mRN0y490n&IOrbS%IY1KGQR&$UU4vbHqddjD6ITyGln9OO z(ithlVx%W#eGT^w*FwPLNZRxNPVwCUYzbHWb5_m~9ikpAVj`hkX-0B&$<7Z*`Zp9~ z!U_0+08uOjU&N2?r|l)h}6O@eUz1h sgWB%L)GYY@GtL*1eu4odY`!&?ok#JW*8lrbM@5o2Dmea85&*>i0c)KSZ#pRZri)&?MmYMMh84;OT*T_nd>{S;j<7Urf zTv=VRMJ|%x{rX61ageh< z84QZwF5k(^!I$jN*ZzK|eW%e$t#)3)_;y=h_|sR&=Yg9nA`=E$93mprZn+Ieb$Pmk zYEcuO1)Td7ZNvFPEV?js=ty-zrDNgP$TT{d133sq^Ec< zMUfz4;J^U{o;jD!E~>RkU3qP%7}MUGuu`^;_X_GkROE;T7T%2DKCF z=0zS8>u;vfzueSsoN0K%NeNKn!K57%-7B>S&OGkIcqB6EMHw8rd!ZzKc~px<8+5|2 zO^_yC!|n?OV!YKe69)ORwH7CW(~!x-MgKe{VmA_uyNNw4!$ohj@O$f|)V)^x8Gdht zWc7DZ1QHy%^Q@jyuG`aV z5yTe#Tj3K_XQ~rMki0uFs@!{0A+AD2_E}Fx4PVV}t*p6`+Jf-*i-+HF@;qHZ;xfLU zjVrm@b){_S7gGKryjM)M2w?cxUFY7B^Z2s!)sZc1h&}Us&&&tHub)@VbmE%vXXlug zCeqkw$PaCovIg|#&w{}Qxp$wFTJP26$}Gz;&c%S?XnK@(@i?Pv#$lati)A)4W0|k` z#?uFxnF;8Za(BUE$xKmW*l0SVu`sKS*zZ=fl)V()M@eytBN%hpKT_$F+T)M{kjS7=~ zsL;b^i_eVz%~4MmF;5&b6dY(Tzn5Fte86cL6woWOVaf;^3oCK`m`QqEvS@(}jrOD} zn0jbfrn^rnp!7jgED<4Tdi2QzR_FQn4J&7Muf5i|OCO z4B1s=deC7fldga%6MOleb=-5w(|&-oSa~XyW_yHaEumBRknJUL)eyOV6hzOEjqElH zD9$r_SO&V)(^n1<8Co?h3Q>mlYM&FE&HCR<<3>)t?{3KEw zsjJaDfK|u4<#vp(Kung4{f?aF6ao}3cC|9T_bryxkCJ~6IdE+J>zQDs>f}b_{Q(;I zPGczFh0#`lbNnVl(M#hT*O!*&sJ-`--Z_T%m}bCYYmtRhf$g>~>eh=*cINSd|NJ|o z-q4pwRY(N0Tr-1$Z%V6y&-4dA zv?hhJ8I+H+7A3wLB4s(`_pt~FdB`Mnwn}`SJo|+BRRiXRHJAGxQ7|dQ_hem@-Nu23 znKc`oy$%0>Z~V(`72`rAE!8I`_Rdw``3Ami8A&C6^h(vTJ8Ios*j7F0C3Y3^CWYOv z0K0h;Nj}OyO%6ex=QlQA5JXhRN^n=ACt#06(+3XM1w*AazxV4e(Hh-Pan52(dSD<7 zk=n+^&%tRM%8uuzw&Z#a)nh3k)lO=2wccs6BiTFJm$jd5>L~RE@Nz?g2d}i=JOXb( z-(;g2Q-0XiNKn_r*b{oKIK?a_G|Q-?bPCRq+J20^qr1W$bFrumKiy^Or(5RQd2ok^cv)L%VSD||<;3JEL+c6Li2h4}hMj^t)-U%Q6 z_~IW0*Nyx)d0DSRZR5U8eZzMriq%H^{Py)&mVK7Z`j^;)^}x34?*vp5#?n@7f@xZx zI#?@DJE(1nule^GN_$lq97aG@l*+>&bSdE=NWIa6lk#(X;8oXm7@5K@t6Sfl(`oj>nONekQ|=|-lICP zRMC=SW0j6^U5r=X2{Zscn<;GrIlC<@~h!j$C}`IB#A>3-Oit)9QRjs2b!SPvkN>G{P@J zcB@q8*CdL5Y))NKib*_-MeD1<@+gaM|s z%B);;qR%t0jwTs!Ca~Y#JTK`nZnVnrn>VkOD>i!k_!1pEzmo*#g-VfVgeWbfWv~Nt z_LvqL{M*w^rUs7f+_k9h_f(tDdEhwB;P+_eeM*eB_#JG2ox7ah<;9-LK2os==5TW1 zGR-ZWrd}3;Lc2Sy(R}A1%JYku)N4DRHp4$@^J8bISs@y5P{HsJEo?ui+9DvFq{CX{ zm^+~7t9ZQ#C=-%lg{dMX4@>x5jPUrLc`h?>V^qgn*AI!5gSJyDR1h= z{4JbhF@0SD+TQ_-cFLfU_^yWGKjX(#GIZksD<|F&Oa*a>!$zs5#u#EGHnK4aWRN6T zc1@js9%iHUaIS_zP=+?T^q6Z>`;HiFx<8XPsKWe2 zhLQRT?IN62ECh0WiB|t_Tp`V)L;0%4{pzYziqBhY-EYiu+uB^x^6_gMa`oM$(p4kB ztT0oHs+a~5<+~0K>2FK$c&PJVi!8VW9BJOX{VEBG&Rx~9R%qOr8DRl$o>fx;f%LTh z|1iMu*i^Q6`Pi#n&X*e@`=m3oJ$fO<9Zu6j)JTY?kYoaGvePf7qnOn|K}X=)I%OUC z(EthnIR8`P-3y!tl`QL1y+7Xtzmz_=X%sicR@1c@I^F#s<3}uv*P7NZN>}*{8xmg4 zA9E?KK(f_ntj&%-w_w1;np`XumC-W|eya8nB2dz8xk&$L4;>suTPvTL4W0f&PY=?cC)SQO8YsZs9wta9l`7xtEm;O+NGVV*%DR>4VcmfF5>_>wg zF6}Ih#SQgYC_EHACyDy_zuRaU9hmdj4G8>m0Czn>^DsZS1bw`bKk>HJ`aN_+$and_ S4ZN>G^PJI*+>m78!v6r7Z53Gn diff --git a/src/static/index.html b/src/static/index.html index 831f27c..cb40d72 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -96,6 +96,7 @@ Spread Relation Parent + diff --git a/src/static/js/graph/index.js b/src/static/js/graph/index.js index ff4a433..f9d07f1 100644 --- a/src/static/js/graph/index.js +++ b/src/static/js/graph/index.js @@ -221,7 +221,7 @@ export function update (g = lastGraph, reset = false) { node = nodes.selectAll(".node").data(graph.nodes, function (d) { return this._id || d.id; }); node.exit().remove(); let nodeEnter = node.enter().append("g") - .each(function (d) { this._id = d.id; }) + .each(function (d) { this._id = d.id; d.element = this; }) .attr("class", d => `node${ d.id === 0 ? " root" : "" } ${ d.type || "unknown" }`) .classed("selected", (p) => p.selected) .call(dragger) diff --git a/src/static/js/tabular/index.js b/src/static/js/tabular/index.js index aa6d6d0..c7f70eb 100644 --- a/src/static/js/tabular/index.js +++ b/src/static/js/tabular/index.js @@ -14,6 +14,16 @@ let sorter = (a, b) => { return a > b ? sorting.order : a === b ? 0 : -sorting.order; }; +/** + * this: node + */ +function switchSelected () { + if (!this.element) + return; + d3.select(this.element).classed("selected", this.selected = !this.selected); + updateSelection(); +} + function updateSelected () { let data = getSelection().filter(node => node.type === "entity").sort(sorter), table = document.querySelector("#tabular-selected"); @@ -30,6 +40,10 @@ function updateSelected () { (c = row.insertCell(5)).textContent = node.edgeType || ""; c.className = `${ node.edgeType }Item`; row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?"; + let ee = document.createElement("i"); + ee.className = "icon-close"; + ee.addEventListener("click", switchSelected.bind(node)); + row.insertCell(7).appendChild(ee); } } @@ -49,6 +63,10 @@ function updateOthers () { (c = row.insertCell(5)).textContent = node.edgeType || ""; c.className = `${ node.edgeType }Item`; row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?"; + let ee = document.createElement("i"); + ee.className = "icon-add"; + ee.addEventListener("click", switchSelected.bind(node)); + row.insertCell(7).appendChild(ee); } } @@ -96,7 +114,8 @@ export function init () { d.tabularToggled = !d.tabularToggled; d3.select(this).classed("toggled", d.tabularToggled); d3.select("#table").classed("active", d.tabularToggled); - updateSelection(); + if (d.tabularToggled) + updateAll(); }); d3.select("#exportCSV").on("click", () => { diff --git a/src/static/scss/basic.scss b/src/static/scss/basic.scss index 1a79948..2416cdb 100644 --- a/src/static/scss/basic.scss +++ b/src/static/scss/basic.scss @@ -9,7 +9,7 @@ table { box-shadow: $defaultShadow; td, th { - padding: 3px; + padding: 1px 2px; } td:not(:last-child), th:not(:last-child) { diff --git a/src/static/scss/icons.scss b/src/static/scss/icons.scss index 88477a8..c15434f 100644 --- a/src/static/scss/icons.scss +++ b/src/static/scss/icons.scss @@ -100,3 +100,6 @@ .icon-undo:before { content: "\75"; } +.icon-add:before { + content: "\62"; +} \ No newline at end of file diff --git a/src/static/scss/tabular.scss b/src/static/scss/tabular.scss index 0875231..79d2c34 100644 --- a/src/static/scss/tabular.scss +++ b/src/static/scss/tabular.scss @@ -55,6 +55,14 @@ $headerHeight: 36px; content: " ▲"; } + &:last-child { + border-left: none; + } + + &:nth-last-child(2) { + border-right: none; + } + } #tabular td { @@ -64,6 +72,46 @@ $headerHeight: 36px; text-overflow: ellipsis; } +#tabular { + + td:last-child { + + width: 15px; + border-left: none; + + } + + tr td:last-child { + overflow: visible; + text-overflow: clip; + & i { + position: relative; + top: 2px; + font-size: 13px; + height: 13px; + display: none; + @include transition(none); + } + } + + tr:hover td:last-child i { + display: inline-block; + } + + td:nth-last-child(2) { + border-right: none; + } + +} + +#tabular-selected { + + tr td:last-child { + color: red; + } + +} + #tabular-others { opacity: 0.6; @@ -72,4 +120,8 @@ $headerHeight: 36px; border-top: 1px solid black; } + tr td:last-child { + color: green; + } + } \ No newline at end of file