From a43dbcc189336adc9cdf321751e7ca71371da4b9 Mon Sep 17 00:00:00 2001 From: wouterkool Date: Fri, 24 Apr 2020 12:18:38 +0200 Subject: [PATCH 1/7] Created page IlikeCLR --- main.py | 8 + templates/pages/paper_like.html | 262 ++++++++++++++++++++++++++++++++ templates/pages/papers.html | 5 + templates/pages/papers_vis.html | 8 +- 4 files changed, 281 insertions(+), 2 deletions(-) create mode 100644 templates/pages/paper_like.html diff --git a/main.py b/main.py index a4510829a..b2e2fbc38 100644 --- a/main.py +++ b/main.py @@ -187,6 +187,14 @@ def paperVis(): return render_template('pages/papers_vis.html') +@app.route('/paper_like.html') +def paperLike(): + data = {"keyword": "all", + "page": "papers", + "openreviews": site_data["papers"].values()} + return render_template('pages/paper_like.html', **data) + + @app.route('/recs.html') def recommendations(): data = {"choices": site_data["author_recs"].keys(), diff --git a/templates/pages/paper_like.html b/templates/pages/paper_like.html new file mode 100644 index 000000000..d637530bf --- /dev/null +++ b/templates/pages/paper_like.html @@ -0,0 +1,262 @@ + + + {% set page_title = "ICLR 2020" %} + {% include 'pages/head.html' %} + + + + + {% set active_page = "I♥CLR" %} + {% include 'pages/header.html' %} +
+ + +
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+ + + + + + + + +
+
+
+ +
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+ {# +
+ #} +
+ + + + + {# +
+ #} +
+
+ {# +
+ #} + {##} + {# + + #} + {##} + {# +
#} + {# +
#} + {# #} + {# #} + {# +
+ #} + {# +
+ #} + {# +
+ #} + {# +
#} + {# T:#} + {# +
+ #} +
+
+
+
+
+ +
+
+
+
+

If you hover over a dot, you see + the + related + paper. +

+

If you click on a dot, you go to + the + related paper page. +

+

You can search for papers by + author, + keyword, or title +

+

Drag a rectangle to summarize an + area + of the plot. +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + {% include 'pages/footer.html' %} + + \ No newline at end of file diff --git a/templates/pages/papers.html b/templates/pages/papers.html index 6fcf0cbc0..1169282a2 100644 --- a/templates/pages/papers.html +++ b/templates/pages/papers.html @@ -21,6 +21,11 @@ Visualization + +
  • + I♥CLR + +
    • diff --git a/templates/pages/papers_vis.html b/templates/pages/papers_vis.html index f39559ba6..4e2d6dea0 100644 --- a/templates/pages/papers_vis.html +++ b/templates/pages/papers_vis.html @@ -45,6 +45,10 @@ role="tab" aria-controls="nav-home" aria-selected="true">Visualization +
  • + I♥CLR + +
    • @@ -102,11 +106,11 @@ {# data-toggle="buttons">#} {# #} {# #} {#
    From ef34e9766a1933bf956880f0a9fe17b4265fea8f Mon Sep 17 00:00:00 2001 From: wouterkool Date: Sun, 26 Apr 2020 21:10:11 +0200 Subject: [PATCH 2/7] Frontend with hover functionality, flexible search and like options for papers. API should compute 'like'-lihood for other papers for instant recommendation, currently disabled. --- main.py | 19 +- static/css/ilike.css | 238 +++++++++++++++++ static/images/IlikeCLR-logo.png | Bin 0 -> 6707 bytes static/js/paper_like.js | 439 +++++++++++++++++++++++++++++++ templates/misc/paper_tabs.html | 69 +++++ templates/pages/header_like.html | 35 +++ templates/pages/paper_like.html | 84 +++--- templates/pages/papers.html | 19 +- templates/pages/papers_vis.html | 17 +- 9 files changed, 855 insertions(+), 65 deletions(-) create mode 100644 static/css/ilike.css create mode 100644 static/images/IlikeCLR-logo.png create mode 100644 static/js/paper_like.js create mode 100644 templates/misc/paper_tabs.html create mode 100644 templates/pages/header_like.html diff --git a/main.py b/main.py index b2e2fbc38..955968983 100644 --- a/main.py +++ b/main.py @@ -188,13 +188,26 @@ def paperVis(): @app.route('/paper_like.html') -def paperLike(): +def paperLike(standalone=False): data = {"keyword": "all", "page": "papers", - "openreviews": site_data["papers"].values()} + "openreviews": site_data["papers"].values(), + "standalone": standalone, + "siteroot": "https://iclr.cc/virtual/" if standalone else ""} return render_template('pages/paper_like.html', **data) +@app.route('/paper_like_standalone.html') +def paperLikeStandalone(): + return paperLike(True) + # data = {"keyword": "all", + # "page": "papers", + # "openreviews": site_data["papers"].values(), + # "standalone": True, + # "siteroot": "https://iclr.cc/virtual/"} + # return render_template('pages/paper_like.html', **data) + + @app.route('/recs.html') def recommendations(): data = {"choices": site_data["author_recs"].keys(), @@ -345,6 +358,8 @@ def your_generator_here(): yield "sponsors", {} yield "workshops", {} yield "paperVis", {} + yield "paperLike", {} + yield "paperLikeStandalone", {} yield "papers", {} yield "paper_json", {} yield "index", {} diff --git a/static/css/ilike.css b/static/css/ilike.css new file mode 100644 index 000000000..61765a1e8 --- /dev/null +++ b/static/css/ilike.css @@ -0,0 +1,238 @@ +.overlay{ + position: fixed; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background-color: rgba(0, 0, 0, 0.8); + z-index: 250; + opacity: 0.5; + + .overlay-content { + height: 100%; + overflow: scroll; + } +} + +#loading { + background-color: gray; + display: none; +} + +#loading-indicator { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.lds-grid { + display: inline-block; + position: relative; + width: 64px; + height: 64px; +} +.lds-grid div { + position: absolute; + width: 13px; + height: 13px; + border-radius: 50%; + background: #fff; + animation: lds-grid 1.2s linear infinite; +} +.lds-grid div:nth-child(1) { + top: 6px; + left: 6px; + animation-delay: 0s; +} +.lds-grid div:nth-child(2) { + top: 6px; + left: 26px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(3) { + top: 6px; + left: 45px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(4) { + top: 26px; + left: 6px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(5) { + top: 26px; + left: 26px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(6) { + top: 26px; + left: 45px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(7) { + top: 45px; + left: 6px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(8) { + top: 45px; + left: 26px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(9) { + top: 45px; + left: 45px; + animation-delay: -1.6s; +} +@keyframes lds-grid { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.cards { + z-index: 5; +} + +.pp-card-detail { + /*border: 4px solid #eee;*/ + font-family: "Exo"; + height: 250px; + padding-top : 10px; + + padding-left : 15px; + padding-right : 15px; + display: none; +} + +.pp-mode-ilike:hover { + /*width: 500px; + height: 500px; + margin-top: -100px; + margin-bottom: -100px; + margin-left: -100px; + margin-right: -100px;*/ + width: 150%; + height: 150%; + /*height: auto;*/ + margin-top: -25%; + margin-bottom: -25%; + margin-left: -25%; + margin-right: -25%; + z-index: 1; + background-color: rgba(255,255,255,0.8); +} + +.myCard:hover { + z-index: 1; +} + +.pp-mode-ilike:hover .pp-card-header .pp-card-detail { + /*border: 4px solid #eee;*/ + display: block; +} + +.pp-mode-ilike:hover .pp-card-header { + height: inherit; +} + +.pp-mode-ilike:hover .pp-card-header .title-wrapper .feedback { + display: block; +} + +.pp-mode-ilike:hover .pp-card-header .title-inner { + padding-left: 50px; + padding-right: 50px; +} + +.pp-mode-ilike:hover .cards_img { + width: 64%; + max-height: 120px; +} + +.pp-mode-ilike .pp-card-header { + /*height: 175px;*/ + border: 1px solid #eee; + } + + + .pp-mode-ilike .pp-card-header .card-title { + font-size: 17px; + } + + .title-wrapper { + position: relative; + } + + .title-wrapper .feedback { + display: none; + position: absolute; + top: 0px; + } + + .pp-mode-ilike:hover .title-wrapper .preview { + display: none !important; + } + + .title-wrapper .preview { + display: none; + position: absolute; + top: -18px; + } + + .title-wrapper .preview.dislike { + left: 8px; + } + + .title-wrapper .preview.like { + right: 8px; + } + + .title-wrapper .feedback.dislike { + left: 0px; + } + + .title-wrapper .feedback.like { + right: 0px; + } +/* + .pp-mode-ilike .pp-card-header .title-wrapper div { + display: inline-block; + }*/ + + .feedback .fa-heart{ + margin-top: 2px; + color: lightgreen; + } + + .like .fa-thumbs-up{ + color: #0cb10c; + } + + .feedback .fa-remove{ + color: indianred; + } + + .feedback .fa-times{ + color: indianred; + } + + .dislike .fa-thumbs-up{ + color: indianred; + -webkit-transform: rotate(180deg); + } + + .feedback .fa-thumbs-down{ + color: indianred; + } + + .feedback .fa-stack:hover { + transform:scale(1.2); + transform-origin: center; + cursor: pointer; + } \ No newline at end of file diff --git a/static/images/IlikeCLR-logo.png b/static/images/IlikeCLR-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1499ef875e3aa2b759af1b45147d5bcf0819994f GIT binary patch literal 6707 zcmV-38qDR1P)r3g~eJ;3S<^y2_h{)M6A|ktu0m2n(N0SkC{35`=6QFOm=5>9=l04 z$;|iV3uMonIp=@Q{PzF&{r`tRp06b}kunY-3_vdefDizb0YHh#V>$sKNr3E^0ODKY zP56KB@+9C%pg<)+@-eRJnn;)eT?qg+S-`>0qq+g0i2zyO5^qY{xxs7WNx+l9@JYZG zU>xY09p!)|FD!kz35Qx;6N#vRkxiR$I;#W$5^IS!C7j;qwf7|8NnmIsU1W|r>d(}#s7iBB~_C^JWBV~#^_>IKq}h&Q43;a#2tJPC}T z1PlQKH3$N*7RNQSbgwHd1n&*kL`sT)Vn2}_O%?QW)O*^-2<{Z`(VheVz%^j(>nbbp zgC9+h)a3_%az^QHL*IkWY%vpj*lI;o&|qeeca2^NgllR_dV2h2gwPT~>7YHN%}NH2 zX|}stp7u=A0$OS_z`&Q6y}+|d_ePDzd!TD}m;ea+&nQ65ti9Eom)5LAGY2npdNxy_ zgZdu0pER__o7P$NH`Je3F0E?>V!YYSp54*1Im3h->T%xp_xrB>==euL>Z5crncOq^ z6O#|E{KU#vhWfes{wu0$LWFQNAj3kouZU^X%y?LobP_^4DIr@rUU(+%cI=m4UQbj%K$>^AY#P!psfy~l2vLFtLw*q;J1Bu}O1VxqU~Fk_qyqy5;L)$)6fgwTNW|hY zQB-6if*(W>lgnl(8i{?tK(&aOCquf3Rx4LoT`K?(ORY%XPe;opOL<#8*Xif}UH+qD zk2q1g?^7pz>dkrQ&b#8-DbN1FXAH9(nCu(wEnHN zK3$-kpL_qg`Oi(ioLv5~Enz!sH1JLC3{V|ChC(-Rq~3|f;Q@xZgzW<3kO0O$G*@K8 zz(J${71Q?+;ZQ}G0udwx3jDiFKmsndeAZ4^fPqtQjW=74-_a&?(0DWe#=-*&pWJa| z$5lqtDmt}D>b;=X?_kQdnpQ5WTMZN(sr|M(Hfuy-T}SJt20MLtfRSBF1fXeG%chJk z82w$AFPs`;#V7~6{NQgw$7cH9)sGWsuIzhrc32{ufM9`I#@zE?B3lp53j>uIh-jLJ zL`m$*ixj|6ouV7+fVeF0HQHNR^1#uwHgH zIu6JK3>(X00l<0PFxiH)^}xKaNGQ`VnC2k^Y8tUGmMegPmqIIN&Q3Eb`JhJ-ApA&$ zS_@snxa;G)>c4aFI~(K^viY(sGLDkj*j5=$MhYynf!I;0J;1QHvJ^Pp%psbUxWxhK zzOeLVmfvx(YfhOAG~-3i7E09*?}bC*kSK}~S>^!!o(LEiI=iMkku_|#v}Pp&h?#S7 z#P}Hn4;b&=b^V&x);tDU?8#`a77-*otev80?=C80nbmk1zJ(n~P00v-GVUTJu{9&h&7cyY% zqPsqI(;sj8_5OGESD4BgSDw#Z!(bs(%I$L;Ds{36?6*yJv}`IhYd)ql3`#nI$i`73 z%9S_``KQawETU%y7@LWbNR|~a@XJe z38V)My$NEXc_b*1^}mTXxsKJ_-J69B7}4(NInmDOTad*X;U;h(SIUmpBV9f@nIahJ z0B8b^?4Xpe&5vX*kSX#tB5pv40@R!FCdLwASZPxz%gSX}BKKvj8}KmeKV!qZ+I2Bg zEoYYgZjiS$UBf`IkkF|~x!A=jVC;Oof&oS<5|WCDFn5HTX3zPMJ++e_+)v+vf_~)%n_F z(*n|;=gL1qNUae+V>|)|(==SHlM}!&q<3q8fiM1mxq;40E;jf4-3&0czE&wnlv4nM zk+u{dP&5$&U;4}r1{gmng_^HHd$ z&;VmA-FnutJJPHjkro2Ao{Ue8uOtG9h0l01EZQq+VVOmlK*~bAV1-L*j{+2-UuRdw@la_rj zPJ;_`ghF@G1i92XrF+n`Y=MKZ2{m@8;dXo&1Au$wKBs;R!pY^ko{wi#z#|wgRU;0p ze@y(+3gg(>IQllfIxtW5VW8$Qpjl}CiLcE`Fu-U;zyMD1VE{lsV|^;2Rth9`7XysN zf+&-)1U~plRST)EiA1TADxdEw(Hd`doD^0_fKivMyLofh<{wf@eU`!@0Ng|l2uGA$ zWwc&23x)uk6*#N;0{;c{a|9@K zceHMrWF%KdUhE?r%mJ!K^AW)(=L-hWMRi9M=JL*0!b4SC*nN32P15AxF8j4m0OQUhcV6+mSHHJe zrm{6y*nP9`iz7(j%FvY?pFZR1uNd9tPR%usU^p0>>!#xYFmR3la)?m4NHyb}nT#mi zEM}u4!0346vs9!U$TFnN5bPhp0z@Bb7fDLF21d-nA5s0SfDGJJnMgDW;gY@}wxuDF zl1`>sAaDQyQDPcK^8@_WrkjP!%Vd!&0e>+(#49xs)Y_qrvJEYES9dRvQa6#5LI8}1 zPdt3qjk|ArJ1aTM_3H&Nb<)(Q-Yb9ai$-18@GE58=0uIoVc4d(jwQet3i+@;EzHIY zz|f*5=^P8}tNjlZRLwSxRn6GN{1$q!@KKJhEl-%H93xots$c=c$A5e7R>xJsRnr9H z^xEYp#au6FwPvWR)a85v2BnlMI#eX~f6#9V;HOPGt@ZG%!__!`feQYrm#X^Z<5`Fn z`Pfk$z#TL0SoPhh-+ef}yL`?+A49d%hX)weQnHF*83G3GNsNYwI*tX~sD~=Fmov%F z*qubMprQ{$sYxeb(NBDQ)CE`=P1k8!ysnRAFOYIK+6DHJ&lhG|a@xCx|8#h&)pFi? z&aK~EA6kE3@VCL9zTUnftM>W${I2uw`pTNq*JRMX^Ev-~jMGjZ9$;jbk`-9s-5G#^ zPSAb|jWVNiL-S|PQ!0a}Um94T8RAdVEPlEtj1iD<2FHRzw;n8R7Zx+0h+?{6rgbrZ zAAkFk5AnYoRL~lfsO1M|WX=&0P7Tm}Hws8sLt#e1Mb2N=lsOygK+?Qhy% zO%WtC5Ky#?A^;kQZK!&15MZnj8p{CujreYiqa&$tul1XWB7dbWC;f!)2-Ed$}* zvOe?q!kls7jJN-CI4ChVAS^n`T6(uA?y0PAZt~%0bL2XpsGXnnM)_C*woJDh&YRR|puC zsL5gjgskf?R+yXV*S)(Gz(9>8jsDFz7FzpN+m};H0!(9&p@@M6`=NnYQ`P;Bq8Bbh zuAQy%=5jYL)>sD&^ln`~?eeFdKmU0%z;Ir;)+EQnj{J21l_UTOtRP-gBqf}%M#mCh zXyA+WQ$glxCvaSE=6m zws&`gL$bsnCnKaMWZ}PM;9~3e-=u)x#5fu8~5pOk~=J zuOZIY8-`+C0>--5c(bi~kVC1G7pzG#dC{|N|J=6R=!Isf)0A$u^RlPfxX2^X?yX!} z_mSZXp&UW51#?KO%I1$nz|iEw3NK5XFw~$yH1?(%tzhBO^iA;8zHk|U)W`q;IIX-M zd~Hr*5T*LRej6?W%CRu31VkZl>B(E*Pp;!zSpPQ&S4V*QH!7NiqG3qtzk&K=k5{c_ zfU!dOi6B8BjDR6SfPap^CZj^v(wdc+(HbT|woqWT6l`%baw+kbPYt6`qa^dE&2MS{ zbo(+RP+)1(J={l*00SUvfg7{F9MRAz#3_L-Ml~_UGGL(W+{{mtxt)+IwzU-{v9l=< zEYK;**q)-qM|pDs*A2q85um<}XnH(awZYW%s1Y`n0Lc3!2!@pC3CBOjuP_1(R+S5j z0z1q(aqY(#>wrV@W}?#5{i{eohLQf-I&^*Q-KK+5A9Q&Da1QkH)WJ) zaPvahsTFGH{m9nFO_apUALJ@`L>-(RACn;1vrJK$(!|x}?WUQW_w8E5YPD!#QxK&|>6*n& zZA%4811yOw6%C>Oh7DC4QpX)$E!>UY9w7u3jlk8M#rb7Wy!R30~i1l>&5P{`U0{0xzQWlPzg z3@|hYCr5((qx^#@RrlKMcSj`>T&n>}Kei=-q>uKO$N758j1ku`3K1|)pK$u0 z|62Litbl==)6HfdaDomvEVaK8B9~#NC8bc~(t&4sw4pn|unPtD+8Gtsbt6M7^TCY< ztY{h8YnJ5X!?@$cDyo*%gMJ|JgN55N`n$313j&2eSaE2oKP1RE@%N_yjm&_;Pf+jWA>Gz=vgg1{jYAOARi&j4TuKaNTeT#JM( z1uTLfbHPN*g3sFmjP$Hi2MKAe%n_VhJ^@1?B{_4#nQy&Q`ObOl+xvq{uiy2`uE#W4 z4qGk>7Wu<7)@@$7g!F7a!d^2Ap2v6s47NvI)bbqo(v?e%NOHC}g}oKaZ1pwaD~%Ej zlmXKoiUBZuO8gB^@X-{XqE7f(R0RK84JCz54gCnItYxL>n>C zu;Jaug&uE!q0BiK2WaMzi3I@|c0k2R8wVzd)@@U3ygBQs)#=aAr%7_=YiGXw&b#l} z&n0P}aP&m~5ayD&1PrDIv%_;JMmHSOl%1@x*4B<@p|u^4fZ^7BR%Mn!v~vv@tA*;2 zEXxr*0+G?VIj-p;KAsW&{POlSQ7t;6`X*R=5rR!|zCLTX6bC(L=Nl0bf-BKXL5C<_ z9HpHH7fdmY-nak^?A8%YJfDDp5BInEdnutD*5=e|U2uex2(a209ObC*8|QuFTlb!R z?++&bZE|<_>)j_wRKm8F#|k)k5s9CObO8-GxhK7?Qc;|21R%B;x2~SWYB*r>)TUH; z-m0JR3K+RKK!HGmUdFBgJPhT<5AbpR z`m6^rV?UqS@piPI3#>&mMI)wCfW)EslTG;{E&&58rkA$Fn=C=hEoz%ZNvt-y+2?DH zu9^DC+m9SP@%IzlF?wtg3t8oI5rAdkWyLR$7kYE)X7D$s^7nQ*`=y(Amz{rt{!S=Y5+!AF0sCF2%t@o>=WwYbs3~Y4_ z0M~tR-Ge7SJTdV@@k4m=*ozVA7^|pk|Kb2HJN2@7>-nv9gb*ipT0Vnm9E8JjK9xKl zr{;=s25SOyM2d^$xRVT3{os^uT7r2;BX$|>0maWiS2`IK;b?gc@TBwvTz<4wRFuvIK0A&CH0noq#O%jRv`4+yGwGRvJVTlV0 z5&{qP$96BAl>&?l+K)s5h#kO4J5tf~q<7PGam&eYve3iPw()r5HEKN#u0FNf|5t#aqQ~&VQ$zT0;>2ga=s)drGrV$ypK&@Z0!h z3@|Pg_LNayfECA)z~B7xf`3Yd^e)_aq>&Ob=xkLZ4I`b*W#gpx^mR_Q#+ysW+Typ; z)>7z$A|Lh1#ZvLni6>1we*Eb1U|*o`e=ryngGIrQ=aRYakF~jb^U1#ivI538 zg~d@Nu?!uXm}G{ggnzjL7Q_-PFoDbm;zxSTLSu4*%<}q8dv~@`qvgrwj>c5(8Y0lS{@3jzh+@R4=f6Ie|jS;FbQM@ zjDK%i!T>{JV4*}g@b@E&9?yE;09XV=BKY{{`Ri;SSad=A2Lo2NO|U?jI;?}CEdypE z*4vGY6xiB%!|^0A>=MZO;@`aeGOC45wMd z0%xxWjMwH*9`qc&1C#^GzdCsKu-b%EP?5d`Z~r$CE%FivW+bFw+2|QwCD+rZCP(&%=AZCxJqi zfMeoTAxhV5|U!;1RIK { + jQuery('.cards').append(jQuery.map(papers, card_html)) + lazyLoader(); +} + +const setOrderBy = value => { + if (value != order_by){ + jQuery('.btn-group.order_by input[value="' + value + '"]').click() + } +} + +const likesChanged = () => { + // Add to url + const likestr = jQuery('.myCard[data-likes!=0]').map((i, el) => { + let val = parseInt(jQuery(el).attr('data-likes')); + return jQuery(el).attr('data-id') + "=" + val; // (val >= 0 ? "+" : "-") + Math.abs(val); + }).toArray().join(","); + setQueryStringParameter("likes", encodeURIComponent(likestr)); + + // Note: we minimize, so like gets low value + // Only update directly if we are currently sorting by likelihood, + // otherwise we will update when sorting by likelihood + if (order_by == "likelihood"){ + computeLikelihood(); + } else { + likelihood_outdated = true; + } +} + +const addLike = (card, delta) => { + let mycard = card.parent() + + const likes = parseInt(mycard.attr('data-likes') || '0') + delta; + mycard.attr('data-likes', likes); + // Remove responsiveness to mouse temporarily, so card is no longer hovered + card.css('pointerEvents', "none"); + // Undo after timeout (this way it is queued so we give time for unhover to happen) + setTimeout(() => { card.css('pointerEvents', "auto") }, 0) + + card.find('.preview.like').toggle(likes > 0); + card.find('.preview.dislike').toggle(likes < 0); + + likesChanged() + +} + +const setLikesFromStr = (likestr) => { + + var patt = /(([A-Za-z0-9]+)=([-]?\d+))/ + var changed = false; + jQuery.each(likestr.split(","), (i, s) => { + const match = s.match(patt); + if (match){ + changed = true; + + const id = match[2]; + const likes = parseInt(match[3]); + + const card = jQuery('#card-' + id); + const mycard = card.parent(); + + mycard.attr('data-likes', likes); + + card.find('.preview.like').toggle(likes > 0); + card.find('.preview.dislike').toggle(likes < 0); + } + + }) + + if (changed) { + likesChanged(); + } + +} + +const doSearch = it => { + + $('.typeahead_all').val(it); + setQueryStringParameter("search", encodeURIComponent(it)); + + const gridItems = $grid.find('.grid-item'); + + // TODO improve search functionality + + if (it.length > 0){ + itarr = it.toLowerCase().split(" "); + itarr = jQuery(itarr).filter((i, el) => { return el.length >= 4 }) + gridItems.each((i, el) => { + el = jQuery(el) + const haystack = el.text(); + const compute_match = haystack => { + haystack = haystack.trim().toLowerCase(); + var score = 0; + jQuery.each(itarr, (i, w) => { + if (haystack.indexOf(w) > -1){ + score++ + } + }) + return score; + } + + const score = ( + compute_match(el.find('.card-title').text()) * 4 + + compute_match(el.find('.card-subtitle').text()) * 2 + + compute_match(el.find('.keywords').text()) * 2 + + compute_match(el.find('.tldr').text()) * 1 + ) + el.attr('data-search-match', score) + }) + } else { + gridItems.attr('data-search-match', 1) + } + + $grid.isotope({ filter: function() { + return parseFloat(jQuery(this).attr('data-search-match')) > 0; + } }) + + if (it.length > 0){ + // Sort descending by filter score + if (order_by == 'search'){ + $grid.isotope('updateSortData').isotope(); + } else { + setOrderBy('search') + } + } else { + if (order_by == 'search'){ + // If the ordering was set to search but we cleared the search, we're effectively + // ordering random, so set ordering to random explicitly to make this clear + setOrderBy('random') + } + + } +}; + +function computeLikelihoodResponse(response) +{ + //$('.progress-container').css('background', "linear-gradient(to right, " + response.quantiles.map(scoreToPercentage).map(getColorForPercentage).join(",") + ")"); + if (response) { + likelihood_outdated = false; // We have updated + $.each( response.predictions, function( key, val ) { + // Lower is better, get 95% conf to sort on + $item = jQuery('#card-' + val.id).parent(); + // $item.attr('data-like', val.score); + $item.attr('data-max-score', val.pred - 2 * val.sig); + $item.attr('data-score', val.pred); + $item.attr('data-score-prev', val.prev_pred); + $item.attr('data-sig', val.sig); + $item.attr('data-ei', val.acq); + // $item.attr('data-size', val.size); + $item.find('.score').text(Math.round(val.pred*-100)); + /*$item.find('.min-score').text(Math.round(((val.pred + 2 * val.sig) - 1) * -50)); + $item.find('.max-score').text(Math.round(((val.pred - 2 * val.sig) - 1) * -50));*/ + $item.find('.avg-score').text(Math.round(((val.pred) - 1) * -50)); + $item.find('.std-score').text(Math.round((2 * val.sig) * 50)); + + $matchperc = $item.find('.matchperc'); + var perc = scoreToPercentage(val.pred); + if (val.score < 0) perc = 1; + if (val.score > 0) perc = 0; + $matchperc.width(Math.round(perc * 100) + "%"); + var color = getColorForPercentage(perc); + $matchperc.css("background-color", color); + + //$item.toggleClass('grid-item--size2', val.islarge) + }); + } else { + jQuery('.myCard').each( (i, el) => { + jQuery(el).attr('data-score', 0) + }) + } + jQuery('#loading').hide(); + // jQuery('#main-grid').removeClass('grid-non-updating'); + if (order_by == 'likelihood'){ + // Update in realtime, otherwise don't since random will reshuffle as well + $grid.isotope('updateSortData').isotope(); + } +} + +function computeLikelihood(){ + // API does minimization, so flip the likes to obtain the score (lower = better) + let feedback = jQuery('.myCard[data-likes!=0]').map((i, el) => { + return { 'item_id': jQuery(el).attr('data-id'), 'value': -parseInt(jQuery(el).attr('data-likes'))} + }).toArray(); + // jQuery('#loading').show(); + let data = { + 'embeddings': allProj, + 'feedback': feedback + } + jQuery('#loading').show(); + if (LIKE_API) { + jQuery.ajax({ + url: LIKE_API, + type: "POST", + data: JSON.stringify(data), + contentType:"application/json; charset=utf-8", + dataType: "json", + crossDomain: true, + success: computeLikelihoodResponse, + error: function (xhr, ajaxOptions, thrownError) { + computeLikelihoodResponse(null) + } + }); + } else { + computeLikelihoodResponse(null) + } + +} + + +/** + * START here and load JSON. + */ +const start = () => { + // jQuery.noConflict(); // Free the dollar sign + + Promise.all([ + jQuery.getJSON('papers.json'), + jQuery.getJSON('embeddings_tsne.json') + ]).then(([papers, proj]) => { + // shuffleArray(papers); + + allPapers = papers; + allProj = proj; + calcAllKeys(allPapers, allKeys); + const allKeysCombined = allKeys['authors'].concat(allKeys['keywords'], allKeys['titles']) + initTypeAhead(allKeysCombined, '.typeahead_all', 'ilike', (el, it) => { doSearch(it) }); + updateCards(allPapers) + + + + + + // Copy id's into parent cards for sorting + jQuery('.myCard').each( (i, el) => { + el = jQuery(el) + el.attr('data-id', el.find('.pp-card').attr('data-id')) + el.attr('data-likes', 0) + }) + + + + jQuery('.pp-card .keywords').on('click', 'a', function(){ + doSearch(jQuery(this).text()); + return false; + }); + + $grid = jQuery('.grid'); + + $grid.isotope({ + // options + itemSelector: '.grid-item', + layoutMode: 'fitRows', + getSortData: { + searchMatch: '[data-search-match] parseFloat', + id: '[data-id]', + //searchMatch: '.pp-card[data-search-match] parseFloat', + //id: '.pp-card[data-id]', + score: '[data-score] parseFloat', + maxScore: '[data-max-score] parseFloat', + ei: '[data-ei] parseFloat', + like: '[data-likes] parseInt', + } + }); + + $grid.on( 'click', '.grid-item .feedback .like', function() { + addLike(jQuery(this.closest('.pp-card')), 1) + }); + + $grid.on( 'click', '.grid-item .feedback .dislike', function() { + addLike(jQuery(this.closest('.pp-card')), -1) + }); + + const urlSearch = decodeURIComponent(getUrlParameter("search")); + const likestr = decodeURIComponent(getUrlParameter("likes")); + const orderBy = decodeURIComponent(getUrlParameter("order_by")) || "likelihood"; + if (urlSearch !== '') { + doSearch(urlSearch) + } + + // Set the likes + setLikesFromStr(likestr); + + setOrderBy(orderBy); + + + }).catch(e => console.error(e)) +} + + +/** + * EVENTS + * **/ + +jQuery('.btn-group.order_by').on( 'click', 'input', function() { + order_by = jQuery(this).attr('value'); + setQueryStringParameter("order_by", encodeURIComponent(order_by)); + $grid.isotope('updateSortData').isotope(); + if (order_by == 'random'){ + $grid.isotope({ sortBy: 'random', sortAscending: true }); + } else if(order_by == 'search') { + $grid.isotope({ + sortBy: ['searchMatch', 'random'], + sortAscending: { + 'searchMatch': false, + 'random': true + } + }); + } else if (order_by == 'likelihood'){ + if (likelihood_outdated){ + computeLikelihood(); + } + $grid.isotope({ sortBy: ['like', 'score', 'random'], sortAscending: { + 'like': false, + 'score': true, + 'random': true + } }); + } +}); + +/** + * CARDS + */ + +const keyword = kw => `${kw.toLowerCase()}` +//language=HTML +const card_html = openreview => ` +
    +
    +
    +
    +
    +
    + +
    +
    + +
    ${openreview.content.title}
    +     +
    + ${openreview.content.authors.join(', ')} +
    +
    +
    + +
    + +
    +
    +

    ${openreview.content.TLDR}

    +

    Keywords: + ${openreview.content.keywords.map(keyword).join(', ')} +

    +
    +
    +
    +
    ` \ No newline at end of file diff --git a/templates/misc/paper_tabs.html b/templates/misc/paper_tabs.html new file mode 100644 index 000000000..bf0e6ce94 --- /dev/null +++ b/templates/misc/paper_tabs.html @@ -0,0 +1,69 @@ +{% set paper_tabs = [ + ('papers.html', 'Browse'), + ('paper_vis.html', 'Visualization'), + ('paper_like.html', 'IlikeCLR'), +] -%} + + + \ No newline at end of file diff --git a/templates/pages/header_like.html b/templates/pages/header_like.html new file mode 100644 index 000000000..a39b09c89 --- /dev/null +++ b/templates/pages/header_like.html @@ -0,0 +1,35 @@ +{% set navigation_bar = [ + ('http://iclr.cc/virtual', 'Go to official ICLR website'), +] -%} + +{##} + + + + + + + + \ No newline at end of file diff --git a/templates/pages/paper_like.html b/templates/pages/paper_like.html index d637530bf..379bdc81e 100644 --- a/templates/pages/paper_like.html +++ b/templates/pages/paper_like.html @@ -5,28 +5,31 @@ + + + + + - {% set active_page = "I♥CLR" %} - {% include 'pages/header.html' %} + {% set active_page = "IlikeCLR" %} + + {% if standalone %} + {% include 'pages/header_like.html' %} + {% else %} + {% include 'pages/header.html' %} + {% endif %}
    + +
    +
    +
    +
    +
    - + {% if not standalone %} + {% set active_paper_tab_id = "IlikeCLR" %} + {% include 'misc/paper_tabs.html' %} + {% endif %}
    -
    - - - - -
    -
    -
    +
    --> + +
    + +
    +
    + + +
    -
    +
    - + - - - - + + + + + + {% set active_page = "IlikeCLR" %} @@ -272,7 +274,6 @@ - + {% set active_page = "IlikeCLR" %} From b09cc6a69beab147e95ee8dec1c046923f32912a Mon Sep 17 00:00:00 2001 From: wouterkool Date: Mon, 27 Apr 2020 13:52:25 +0200 Subject: [PATCH 5/7] Implemented filtering by session --- static/css/ilike.css | 38 +++++++++ static/js/paper_like.js | 137 ++++++++++++++++++++++++++++---- templates/pages/paper_like.html | 93 +++++++++++++++++++++- 3 files changed, 248 insertions(+), 20 deletions(-) diff --git a/static/css/ilike.css b/static/css/ilike.css index 566503d5f..c01f1c4fe 100644 --- a/static/css/ilike.css +++ b/static/css/ilike.css @@ -123,6 +123,44 @@ width: 50%; } +.countLabel { + font-size: 70%; +} + +.session-selector .float-right .btn { + padding-top: 0px; + padding-bottom: 0px; +} + +.session-selector .float-right .btn input { + margin-top: -10px; + margin-bottom: -10px; +} + +.session-selector .float-right { + /*margin-top: -4px; + margin-bottom: -4px;*/ + display: inline-flex; + flex-direction: column; +} + +.session-selector .session_day .btn { + /*margin-top: -16px;*/ + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +.session-selector .session_number .btn { + /*margin-top: -16px;*/ + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + +.session-selector .input { + /*margin: -40px;*/ + /*margin-top: -16px;*/ +} + .pp-mode-ilike:hover { /*width: 500px; height: 500px; diff --git a/static/js/paper_like.js b/static/js/paper_like.js index 861b0941a..a1171e804 100644 --- a/static/js/paper_like.js +++ b/static/js/paper_like.js @@ -6,17 +6,13 @@ const allKeys = { titles: [], recs: [], } -const filters = { - authors: null, - keywords: null, - session: null, - title: null, - recs: null, -}; let order_by = null; +let session_day = null; +let session_number = null; let likelihood_outdated = false; let $grid = null; +var iso = null; let allProj = []; // From https://stackoverflow.com/questions/7128675/from-green-to-red-color-depend-on-percentage @@ -126,6 +122,45 @@ const setLikesFromStr = (likestr) => { } +const filterGrid = () => { + $grid.isotope({ filter: function() { + $this = jQuery(this) + let matchSession = true + if ((session_day != 'all') || (session_number != 'all')){ + matchSession = $this.find('.card-session').toArray().some(el => { + let sessArr = jQuery(el).text().split(" "); + return ( + ((session_day == 'all') || sessArr[0].toLowerCase().startsWith(session_day)) && + ((session_number == 'all') || parseInt(sessArr[1]) == session_number) + ) + }); + } + return matchSession && (parseFloat($this.attr('data-search-match')) > 0); + } }) + jQuery('.filterCount').text( iso.filteredItems.length ); +} + +const setSessionFromStr = (sessStr) => { + const sessArr = sessStr.split(" "); + const sessDay = sessArr[0].toLowerCase(); // Bit hacky fixed length + const sessDayMatches = jQuery('.btn-group.session_day input').filter((i, el) => {return sessDay.startsWith(jQuery(el).attr('value'))}); + const sessNum = parseInt(sessArr[1]); + const sessNumMatches = jQuery('.btn-group.session_number input[value="' + sessNum + '"]') + return setSession( + sessDayMatches.length > 0 ? sessDayMatches.attr('value') : 'all', + sessNumMatches.length > 0 ? sessNumMatches.attr('value') : 'all', + ) +} + +const setSession = (day, num) => { + if (day != session_day){ + jQuery('.btn-group.session_day input[value="' + day + '"]').click() + } + if (num != session_number){ + jQuery('.btn-group.session_number input[value="' + num + '"]').click() + } +} + const doSearch = it => { $('.typeahead_all').val(it); @@ -154,7 +189,7 @@ const doSearch = it => { const score = ( compute_match(el.find('.card-title').text()) * 4 + - compute_match(el.find('.card-subtitle').text()) * 2 + + compute_match(el.find('.card-authors').text()) * 2 + compute_match(el.find('.keywords').text()) * 2 + compute_match(el.find('.tldr').text()) * 1 ) @@ -164,9 +199,7 @@ const doSearch = it => { gridItems.attr('data-search-match', 1) } - $grid.isotope({ filter: function() { - return parseFloat(jQuery(this).attr('data-search-match')) > 0; - } }) + filterGrid(); if (it.length > 0){ // Sort descending by filter score @@ -218,7 +251,6 @@ function computeLikelihood(){ var model = "gaussian"; var sigma2 = 0.3, alpha = 1; var variogram = kriging.train(t, x, y, model, sigma2, alpha); - console.log("trained model") jQuery('.myCard').each( (i, el) => { el = jQuery(el) @@ -270,6 +302,7 @@ const start = () => { el = jQuery(el) el.attr('data-id', el.find('.pp-card').attr('data-id')) el.attr('data-likes', 0) + el.attr('data-search-match', 1) }) @@ -279,6 +312,11 @@ const start = () => { return false; }); + jQuery('.pp-card .card-session').on('click', function(){ + setSessionFromStr(jQuery(this).text()); + return false; + }); + $grid = jQuery('.grid'); $grid.isotope({ @@ -294,6 +332,7 @@ const start = () => { like: '[data-likes] parseInt', } }); + iso = $grid.data('isotope'); $grid.on( 'click', '.grid-item .feedback .like', function() { addLike(jQuery(this.closest('.pp-card')), 1) @@ -303,12 +342,20 @@ const start = () => { addLike(jQuery(this.closest('.pp-card')), -1) }); + if (getUrlParameter("noinfo")){ + jQuery('.remove_alert').click() + } const urlSearch = decodeURIComponent(getUrlParameter("search")); const likestr = decodeURIComponent(getUrlParameter("likes")); - const orderBy = decodeURIComponent(getUrlParameter("order_by")) || "likelihood"; + const orderBy = decodeURIComponent(getUrlParameter("order_by")) || 'likelihood'; + const sessionDay = decodeURIComponent(getUrlParameter("session_day")) || 'all'; + const sessionNumber = decodeURIComponent(getUrlParameter("session_number")) || 'all'; + setSession(sessionDay, sessionNumber); if (urlSearch !== '') { doSearch(urlSearch) } + // setSessionDay(sessionDay) + // setSessionNumber(sessionNumber) // Set the likes setLikesFromStr(likestr); @@ -350,12 +397,70 @@ jQuery('.btn-group.order_by').on( 'click', 'input', function() { } }); +jQuery('.btn-group.session_day').on( 'click', 'input', function() { + session_day = jQuery(this).attr('value'); + setQueryStringParameter("session_day", encodeURIComponent(session_day)); + filterGrid(); +}); + +jQuery('.btn-group.session_number').on( 'click', 'input', function() { + session_number = jQuery(this).attr('value'); + session_number = (session_number == 'all') ? 'all' : parseInt(session_number) + setQueryStringParameter("session_number", encodeURIComponent(session_number)); + filterGrid(); +}); + +jQuery('.remove_alert').on('click', function() { + setQueryStringParameter("noinfo", 1) +}) + /** * CARDS */ -const keyword = kw => ` `${kw.toLowerCase()}` + +// const card_time_small = (openreview, show) => { +// const cnt = openreview.content; +// return show ? (!SITE_ROOT ? ` +// +//
    +// ${cnt.session.filter(s => s.match(/.*[0-9]/g)).map( +// (s,i) => `${s.replace('Session ','')} ${card_live(cnt.session_links[i])} ${card_cal(openreview, i)} `).join(', ')} +//
    +// +// ` : ` +// +//
    +// ${cnt.session.filter(s => s.match(/.*[0-9]/g)).map( +// (s,i) => `${s.replace('Session ','')}`).join(', ')} +//
    +// +// `) : ''; +// } + +const card_time_small = (openreview, show) => { + const cnt = openreview.content; + return show ? ` + +
    + ${cnt.session.filter(s => s.match(/.*[0-9]/g)).map( + (s,i) => `${s.replace('Session ','')} ${card_live(cnt.session_links[i])} ${card_cal(openreview, i)} `).join(', ')} +
    + + ` : ''; +} + +const card_icon_video = icon_video(16); +const card_icon_cal = icon_cal(16); + +const card_live = (link)=> SITE_ROOT ? '' : `${card_icon_video}` +const card_cal = (openreview, i)=> `${card_icon_cal}` + + //language=HTML const card_html = openreview => `
    @@ -379,7 +484,7 @@ const card_html = openreview => ` class="text-muted">
    ${openreview.content.title}
    -
    +
    ${openreview.content.authors.join(', ')}
    + +
    +
    -
    +
    @@ -61,6 +73,9 @@
    +
    + +
    +
    + +
    + +
    + + + + + +
    +
    + + + + + + +
    + +
    + +
    @@ -270,6 +354,7 @@
    + #} From 104640d463bfa7dbe69603da4b6af16c86c32f7f Mon Sep 17 00:00:00 2001 From: wouterkool Date: Thu, 7 May 2020 12:24:48 +0200 Subject: [PATCH 7/7] Improved search with exact match on typeahead and explicit filtering of small words --- static/js/paper_like.js | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/static/js/paper_like.js b/static/js/paper_like.js index a1171e804..6baf300f8 100644 --- a/static/js/paper_like.js +++ b/static/js/paper_like.js @@ -161,7 +161,14 @@ const setSession = (day, num) => { } } -const doSearch = it => { +const doExactSearch = it => { + return doSearch(it, true) + // Disabled since it somehow gets overridden by the typahead script + // Todo some other way to indicate that we perform an exact search? + // return doSearch((it.charAt(0) == '"' ? '' : '"') + it + (it.charAt(it.length -1) == '"' ? '' : '"')) +} + +const doSearch = (it, exact) => { $('.typeahead_all').val(it); setQueryStringParameter("search", encodeURIComponent(it)); @@ -169,10 +176,14 @@ const doSearch = it => { const gridItems = $grid.find('.grid-item'); // TODO improve search functionality - - if (it.length > 0){ - itarr = it.toLowerCase().split(" "); - itarr = jQuery(itarr).filter((i, el) => { return el.length >= 4 }) + const query = it.trim().toLowerCase(); + if (query.length > 0){ + // const exact = (query.charAt(0) == '"' && query.charAt(query.length - 1) == '"') + let itarr = ( + exact ? + jQuery([query.substring(query.charAt(0) == '"' ? 1 : 0, query.length - (query.charAt(query.length - 1) == '"' ? 1 : 0))]) : + jQuery(query.split(" ")).filter((i, el) => { return ['and', 'or', 'on', 'of', 'for', 'by', 'with', 'via', 'in', 'to', 'a', 'an', 'the'].indexOf(el) < 0 }) + ); gridItems.each((i, el) => { el = jQuery(el) const haystack = el.text(); @@ -289,8 +300,8 @@ const start = () => { proj_dict = {}; jQuery.each(allProj, (i, el) => { proj_dict[el['id']] = el['pos']}); calcAllKeys(allPapers, allKeys); - const allKeysCombined = allKeys['authors'].concat(allKeys['keywords'], allKeys['titles']) - initTypeAhead(allKeysCombined, '.typeahead_all', 'ilike', (el, it) => { doSearch(it) }); + const allKeysCombined = allKeys['authors'].concat(allKeys['keywords'], allKeys['titles']); + initTypeAhead(allKeysCombined, '.typeahead_all', 'ilike', (el, it) => { allKeysCombined.indexOf(it) >= 0 ? doExactSearch(it) : doSearch(it) }); updateCards(allPapers) @@ -308,7 +319,7 @@ const start = () => { jQuery('.pp-card .keywords').on('click', 'a', function(){ - doSearch(jQuery(this).text()); + doExactSearch(jQuery(this).text()); return false; }); @@ -352,7 +363,8 @@ const start = () => { const sessionNumber = decodeURIComponent(getUrlParameter("session_number")) || 'all'; setSession(sessionDay, sessionNumber); if (urlSearch !== '') { - doSearch(urlSearch) + let it = urlSearch; + allKeysCombined.indexOf(it) >= 0 ? doExactSearch(it) : doSearch(it) } // setSessionDay(sessionDay) // setSessionNumber(sessionNumber)