forked from cnr-isti-vclab/ReviewerNet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
295 lines (276 loc) · 19.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
<title>SemanticBrowser.org</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
<script type="text/javascript" src="src\jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="src\jscolor.js"></script>
<script type="text/javascript" src="src/d3.v4.min.js"></script>
<link rel="icon" href="filled_logo.ico" >
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\nouislider.min.css">
<script src="src\bootstrap.min.js"></script>
<script src="src\nouislider.min.js"></script>
<!-- <script type="text/javascript" src="src/jquery.autocomplete.js"></script> -->
<script type="text/javascript" src="src/modernizr-custom.js"></script>
<script src="src/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/theme.css">
</head>
<body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118764276-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-118764276-1');
</script>
<div class="container-fluid" id= "all" >
<!-- RT & PN col -->
<div class="row" style="overflow: hidden">
<div class="col-sm-8" style="padding-left: 5px;padding-right: 2px;">
<div class="row ui-widget-content" id="resizable">
<div id="aut_table" class="container-fluid aa graph" style="width: 100%; overflow-y: auto">
<svg id = "svgRT" class = "svg" style="width: inherit; height: inherit" >
<!-- RT -->
<table id="authTable">
</table>
</div>
</div>
<!-- PN row-->
<div class="row ui-widget-content" id="row21">
<div class="panel-body scroll container-fluid graph a ap text-left" style="width: 100%; height: inherit">
<!-- Start Msg -->
<span id="loading" class="text-center"><div class="cssload-loader">Loading data</div><!--<div class="loader text-center"></div>--></span>
<span id="startMsg">
<img id="logo" src="imgs/filled_logo.PNG" height= 80px width = 100px>
<h3 style="transform: font-variant-caps: petite-caps; color: #385e84; font-weight: bold;">SemanticBrowser.org</h3>
<p>
A <a class="links" href="https://d3js.org/">D3js</a>-based-browser on a filtered version of the <a class="links" href="https://labs.semanticscholar.org/corpus/" title="SemanticScholar lastest corpus link">Semantic Scholar corpus.</a>
<br>The user can search for papers and build its own cluster of interesting papers including in and out-citations. <br> Above the paper graph the one referred to the authors is displayed. <br> With this tool we hope to simplify the <strong>process of choosing reviewers</strong> that know well a subject but are not conflicted with the authors of the paper under scrutiny.
</p>
<hr>
<!-- <h4>Usage:</h4>
<ol>
<li>build a topic-based graph by searching for papers titles in the <strong>AREA PAPER</strong> searchbar</li>
<li>build the set of conflicting authors by searching their names in the <strong>CONFILICTING AUTHORS</strong> search bar</li>
</ol>
Once the graph and the conflicting authors list have been populated, good reviewer candidates are shown in the author area.-->
<br>For further information visit <a class="links" href="https://github.com/hybrs/hybrs.github.io" style=" color: #275d58; font-style: oblique; font-size: 0.6em"><img class = "links" id="ghs" src="imgs/gh.png" alt="the GitHub page"></a>
</span>
<!-- Paper Graph -->
<svg id = "svgAxis" class = "svg" style="width: inherit; height: 800px" >
<defs>
<linearGradient id="grad_v" x1="0%" y1="0%" x2="0%" y2="100%">
<stop id = "firstStopS" offset="0%" style="stop-color:#ffff99;stop-opacity:1"/>
<!-- <stop id="secondStopS" offset="50%" style="stop-color:white;stop-opacity:1" />-->
<stop id="thirdStopS" offset="100%" style="stop-color:#00cc99;stop-opacity:1" />
</linearGradient>
</defs>
<rect id="cmpa" x="20" y="126" width="10px" class="pop-up" title = "Is a color-map associated with the number of in-citations. The steps are 0 and 100." height="36%" fill="url(#grad_v)" text ="100" ry="6px" />
<text x="35px" y="126px" style="font-size: 0.7em;" fill="rgba( 0, 0, 0, 0.609 )">100</text>
<!-- <text x="35px" y="275px" style="font-size: 0.7em;" fill="rgba( 0, 0, 0, 0.609 )">30</text>-->
<text x="35px" y="420px" style="font-size: 0.7em;" fill="rgba( 0, 0, 0, 0.609 )">0</text>
</svg>
<svg id = "svgP" class = "svg" style="width: inherit" height= 500px >
</svg>
</div>
</div>
</div>
<!-- RN & GUI col -->
<div id="AG-col" class="col-sm-4">
<div class="row ui-widget-content" id="resizable1" style="margin: 0;">
<div id="AG-container" class="container-fluid ag-container graph ag">
<svg id="svgAG_names" class="svg" style="width: 100%">
<svg id = "svgAG" class = "svg" style="width: 100%">
</svg>
</div>
</div>
<div class="row ui-widget-content" id="row22">
<!-- Toolbox -->
<div id = "toolbox" class="panel-body text-center">
<div class="row" id="tbRow1" style="margin-bottom: 0px; height: 50px">
<table id = "bnt-table" class="table table-condensed">
<tr>
<td>
<label class=" pop-up gui-menu-item" title = "It's minimum number of authored papers in the PN for a researcher to be included in the RT and the RN." for="MNP">Productivity<br> bar</label>
<input id="MNP" class = "spinner" name="value">
<!-- <button id="disableMNP">Filter authors</button>-->
</td>
<!--
<td>
<label class=" pop-up gui-menu-item" title = "Two researchers are considered as co-authors if they have at least n paper in common published in the last C years" for="N">n</label>
<input id="N" class = "spinner" name="value">
<button id="disableN">Filter<br>authors</button>
</td>
-->
<td>
<label for="C" title = "Two researchers are considered as co-authors if they have at least a paper in common published in the last n years" class="pop-up gui-menu-item">Co-authors<br>Expiration</label>
<input id="C" class = "spinner" name="val">
<!-- <button id="disableC">Filter authors</button>-->
</td>
<td>
<label for="lastYearOfP" title = "If enabled, a researcher is displayed in the RT and RN only if has published a paper in the last y years." class="pop-up gui-menu-item">Author<br>Freshness</label>
<input id="lastYearOfP" class = "spinner" name="value">
<!-- <button id="disableY">Filter authors</button>-->
</td>
<!--<td>
<label for="MNoC" title = "Is the Mininimum Number of out-Citations threshold. Each paper having a number of out-citations smaller than this threshold is displayed in transparency in the PN." class="pop-up gui-menu-item">c</label>
<input id="MNoC" class = "spinner" name="value">
<button id="disableMNoC">Filter papers</button>
</td>-->
</tr>
</table>
<!--
<h9 id = "MNoC" title = "Is the Mininimum Number of out-Citations threshold. Once enabled, it lowers the opacity of papers that have a number of out-citations less than the indicated one." class="pop-up">Minimum number of out-citations</h9>
<input id="input-numberTOC" min="0" max="20" step="1" style="width: 40px" type="number">
<input type="checkbox" id="thetaCitCb" title = "Toggle/remove MNoC threshold"/>
</div> -->
</div>
<div class="row" id="tbRow4">
<!--
<table id="stats" style=" float:left; width:30%">
<caption title = "This table shows some interesting numbers, where P is the number of paper explicitly added to the visualization (searchbar or double-click on a node), N(P) is the total number of visualized papers that includes both paper in P and all their neighbors, aka in/out-citations, A(P): is the number of authors of the interesting papers P and A(N(P)) is the number of authors in N(P))." class="pop-up" id="statss" style="font-style: oblique; font-variant-caps: titling-caps; font-size: 0.8em; padding: 0px; text-align: center; font-weight: bold; cursor: help"><font color="#1e9476">STATS</font></caption>
<tr>
<td id="apn" class="stat"><strong><font color="#1e9476">A(P) =</font></strong> 0</td>
<td id="anpn"class="stat"><strong><font color="#1e9476">
A(N(P)) =</font></strong> 0
</td>
</tr>
<tr>
<td id="pn" class="stat">
<strong><font color="#1e9476">P =</font></strong> 0
</td>
<td id="npn" class="stat">
<strong><font color="#1e9476">N(P) =</font></strong> 0</td>
</tr>
</table>
-->
<table id = "pruning-table">
<tr>
<td class="tdp">
<input id = "cb-av" type="checkbox" value="false"><label class="checkbox-inline pop-up gui-menu-item" title="If enabled, all authors of all the visualized papers will be displayed. Can be computationally expansive.">Expand Author Graph</label>
</td>
<td class="tdp">
<input id = "cb-confl" type="checkbox" value="false">
<label title ="If enabled, hide all conflicting researchers from the RT and RN." class="checkbox-inline pop-up gui-menu-item">Hide Conflicted</label>
</td>
</tr>
</table>
<!--<select id="authViz" style="transform: translateY(30%); float: right; width: 65%">
<optgroup label="Authors visualization options:">
<option value="apO">Show <strong><font color="#275d58">A(P): </font></strong>authors with at least one paper in the active papers list</option>
<option value="anpO">Show <strong><font color="#275d58">A(N(P)): </font></strong>all authors of all the visualized papers</option>
</optgroup>
</select>-->
<!-- <button type="button" style="transform: translateY(30%);" class="btn btn-default">Hide conflicted</button>-->
</div>
</div>
<div id="my-container" class="container-fluid my-container-resize">
<!-- Search Bars -->
<div id = "sidenav" class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu">
<li class="sidebar-search">
<div id="searchfield" style="width: 100%; padding-top: 1px;">
<table>
<tr>
<td class="td1">
<a id="conflict-a" title = "This area allows the user to serach for authors for which wants to find conflicts. The list of searched authors is displayed below the searchbar. It is also possible to add authors to this list simply by clicking on an author name in the Paper Info area." class="text-left pop-up" style="float: left; font-size: 1em; transform: translateY(40%); font-variant-caps: petite-caps; color: #385e84; font-weight: bold; cursor: help">Submitting Authors <span id="authors-badge"class="badge"></span> </a>
</td>
<td class ="td2">
<form style="margin: 0 auto; background-color: rgba( 0, 0, 0, 0 );"><input name="authoSearchBar" class="biginput" id="authors-autocomplete" autocomplete="off" type="text" placeholder="Find authors..." style="width: 100%"></form>
</td>
</tr>
</table>
</div>
</li>
<li id="aal" class="element">
<ul id = "authList" class="list-group">
</ul>
</li>
<li class="sidebar-search">
<div id="searchfield" style="width: 100%; padding-top: 1px;">
<table>
<tr>
<td class="td1">
<a id="review-a" title = "This area allows the user to serach for authors and elect them as candidate reviewers. The list of searched authors is displayed below the searchbar. It is also possible to add authors to this list simply by double-clicking on it in the graphs." class="text-left pop-up" style="float: left; font-size: 1em; transform: translateY(40%); font-variant-caps: petite-caps; color: #385e84; font-weight: bold; cursor: help">Selected Reviewers<span id="rauthors-badge"class="badge"></span> </a>
</td>
<td class ="td2">
<form style="margin: 0 auto; background-color: rgba( 0, 0, 0, 0 );"><input name="rauthoSearchBar" class="biginput" id="rauthors-autocomplete" autocomplete="off" type="text" placeholder="Find authors..." style="width: 100%"></form>
</td>
</tr>
</table>
</div>
</li>
<li id="raal" class="element">
<ul id = "rauthList" class="list-group">
</ul>
</li>
<li class="sidebar-search">
<div id="searchfield" style="width: 100%; padding-top: 1px;">
<table>
<tr>
<td class="td1">
<a id="area-paper-a" title = "This area allows the user to serach for papers to build the topic-based graph. The list of added papers is displayed below the searchbar." class="text-left pop-up" style="float: left; font-size: 1em; transform: translateY(31%); font-variant-caps: petite-caps; color: #385e84; font-weight: bold; cursor: help">Key Papers<span id="area-paper-badge"class="badge"></span> </a>
</td>
<td class ="td2">
<form style="margin: 0 auto; background-color: rgba( 0, 0, 0, 0 );"><input name="papersSearchBar" class="biginput" id="papers-autocomplete" autocomplete="off" type="text" placeholder="Find papers..." style="width: 100%"></form>
</td>
</tr>
</table>
</div>
</li>
<li>
<div id ="papL">
<ul id = "papList" class="list-group">
</ul>
</div>
</li>
<li id="pi" class="element">
<table>
<tr class="side-tab">
<td class="td1pi">
<a id="paper-info-a" title="This box shows some useful information about the selected paper such as title, year of pub., venue and journal name, authors and citations. Authors and citations have their associated mouse handlers." class="text-left pop-up" style="width: 98%; padding-left: 0px; padding-right: 0px; padding-top: 4px; float: left; font-size: 1em; font-variant-caps: petite-caps; color: #385e84; font-weight: bold; cursor: help">Paper Info</a>
</td>
<td class ="td2title">
</td>
</tr>
</table>
<!-- </td>
</tr>
</table>
-->
<table id = "paperInfo" style="width: 98%">
</table>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center" id = "my-foot">
<table style="width:100%; height: 100%">
<tr>
<td>
<span style="justify-content: center; font-size: 1em; font-variant-caps: all-small-caps; font-weight: bolder; color: #1584c0">Semantic Browser </span>
</td>
<td>
<span style="justify-content: center; font-size: 0.8em; color: #1584c0">Computer Graphics instance: ACM TG, CGF, IEEE TVCG, SIGGRAPH, Visual Computer, CG, IEEE Vis, IEEE CGA </span>
</td>
<td>
<a class="links" href="http://labs.semanticscholar.org/corpus/" style="height: 9px; cursor:zoom-in; color: #275d58; font-style: oblique; font-size: 0.5em">(data courtesy of semanticScholar)</a><a class="links" href="https://github.com/hybrs/hybrs.github.io" style="cursor:zoom-in; color: #275d58; font-style: oblique; font-size: 0.6em"><img class = "links" id="ghl" src="imgs/gh.png" alt="(about)"></a>
</td>
</tr>
</table>
</footer>
</div>
<script src="src\author-graph.js"> //rgba( 71, 66, 66, 0 )</script>
<script src="src\script.js"> //rgba( 71, 66, 66, 0 )</script>
<script src="src\authTable.js"></script>
<script src="src\mouse-handlers.js"></script>
<script src="src\toolbox.js"></script>
</body>
</html>