Skip to content

Commit 20a3054

Browse files
timwoelfletimwoelfle
committed
First commit
1 parent 6a442ac commit 20a3054

8 files changed

+12565
-0
lines changed

‎index.html

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Local Citation Network</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="index.css">
8+
<link rel="stylesheet" href="lib/buefy.min.css">
9+
<link rel="stylesheet" href="lib/vis-network.min.css">
10+
<script src="lib/vue.js"></script>
11+
<script src="lib/buefy.min.js"></script>
12+
<script src="lib/axios.min.js"></script>
13+
<script src="lib/vis-network.min.js"></script>
14+
<style>
15+
html {
16+
overflow-y: auto;
17+
font-size: 14px
18+
}
19+
20+
/* Flexible height management */
21+
section#app {
22+
height: 100vh;
23+
}
24+
25+
.columns {
26+
height: 85%;
27+
padding: 1rem 1.5rem 0 1.5rem;
28+
padding: 0rem 0rem 0 0rem;
29+
margin: 0 0 0 0
30+
}
31+
32+
.b-tabs:not(:last-child) {
33+
margin: 0;
34+
}
35+
36+
.b-tabs .tab-content {
37+
height: 100%;
38+
padding: 1rem
39+
}
40+
41+
.tab-item {
42+
height: 100%;
43+
overflow-x: hidden;
44+
overflow-y:auto
45+
}
46+
47+
/* Hoverable h2 tabs */
48+
49+
h2.title {
50+
color: #999999;
51+
}
52+
53+
li.is-active h2.title {
54+
color: #000000;
55+
}
56+
57+
/* Icon replacements */
58+
59+
.mdi-upload:before {
60+
content: "⇪";
61+
font: 1.5em bold sans-serif;
62+
}
63+
64+
.mdi-chevron-right:before {
65+
content: "❯";
66+
font-style: normal;
67+
}
68+
69+
.mdi-arrow-up:before {
70+
content: "↑";
71+
font: 1.5em bold sans-serif;
72+
}
73+
</style>
74+
</head>
75+
76+
<body>
77+
<section id="app">
78+
<nav class="navbar" role="navigation" aria-label="main navigation" style="border-bottom: 1px solid #dbdbdb; overflow-x: auto; transform:rotateX(180deg);">
79+
<div style="transform:rotateX(180deg); display: flex">
80+
<a class="navbar-item" href="https://bulma.io">
81+
<h1 class="title is-3">Local Citation Network</h1>
82+
</a>
83+
84+
<ul class="buttons" style="flex-wrap: nowrap">
85+
<li class="navbar-item"><b-button @click="clickButtonAdd" rounded>+</b-button></li>
86+
<li v-for="item, index in graphs" :key="index" class="navbar-item">
87+
<b-button :type="(index==currentGraphIndex) ? 'is-primary' : ''" :title="item.title" @click="currentGraphIndex=index" rounded>
88+
{{ item.label }}
89+
<a title="Close tab" class="delete" style="margin-top:2px" @click.stop="clickCloseTab(index)"></a> <!-- .stop prevents event propagation to parent @click event -->
90+
</b-button>
91+
</li>
92+
</ul>
93+
</div>
94+
</nav>
95+
96+
<div class="section columns">
97+
<b-tabs v-model="showSuggested" class="column is-two-thirds" size="is-small">
98+
<b-tab-item>
99+
<template slot="header"><h2 class="title is-4">References ({{ inputArticles.length }})</h2></template>
100+
<div class="content">
101+
<p v-if="currentGraph.sourceMA">
102+
References of the following source article:<br>
103+
{{ currentGraph.sourceMA.entities[0].E.ANF.map(x=>x.FN + ' ' + x.LN).join(', ') }}. <a :href="'https://doi.org/' + currentGraph.sourceMA.entities[0].E.DOI" target="_blank"><em>{{ currentGraph.sourceMA.entities[0].E.DN }}</em></a>. {{ currentGraph.sourceMA.entities[0].E.BV }}. {{ currentGraph.sourceMA.entities[0].Y }}
104+
</p>
105+
<p v-else>
106+
Custom Microsoft Academic search with the following term (max. 50 results): <br>
107+
{{ currentGraph.label }}
108+
</p>
109+
</div>
110+
<b-table :data="inputArticles" default-sort="inDegree" default-sort-direction="desc" :selected.sync="selectedInputArticle" hoverable striped narrowed focusable>
111+
<template slot-scope="props">
112+
<!-- id is for scrolling to row when network node is clicked -->
113+
<b-table-column :id="props.row.Id" field="DN" label="Title" sortable>
114+
<a :href="'https://doi.org/' + props.row.DOI" target="_blank">{{ props.row.DN }}</a>
115+
</b-table-column>
116+
<b-table-column field="ANF" label="First Author" sortable>
117+
<b-tooltip dashed multilined :label="props.row.ANF.map(x=>x.FN + ' ' + x.LN).join(', ')" position="is-right" type="is-dark">
118+
{{ props.row.ANF[0].LN }}
119+
</b-tooltip>
120+
</b-table-column>
121+
<b-table-column field="Y" label="Year" sortable>{{ props.row.Y }}</b-table-column>
122+
<b-table-column field="BV" label="Journal" sortable>{{ props.row.BV }}</b-table-column>
123+
<b-table-column field="ECC" label="Citations" meta="Estimated global citations" sortable>
124+
<template slot="header" slot-scope="{ column }">
125+
<b-tooltip :label="column.meta" dashed position="is-left" type="is-dark">
126+
{{ column.label }}
127+
</b-tooltip>
128+
</template>
129+
<b-tooltip label="Open citations in Microsoft Academic" dashed position="is-left" type="is-dark">
130+
<a :href="'https://academic.microsoft.com/paper/' + props.row.Id + '/citedby'" target="_blank">{{ props.row.ECC }}</a>
131+
</b-tooltip>
132+
</b-table-column>
133+
<b-table-column field="inDegree" label="Deg" meta="InDegree: Number of incoming edges in graph (citations)" sortable>
134+
<template slot="header" slot-scope="{ column }">
135+
<b-tooltip :label="column.meta" dashed position="is-left" type="is-dark">
136+
{{ column.label }}
137+
</b-tooltip>
138+
</template>
139+
{{ props.row.inDegree }}
140+
</b-table-column>
141+
<b-table-column field="numRefs" label="Refs" meta="References in paper" sortable>
142+
<template slot="header" slot-scope="{ column }">
143+
<b-tooltip :label="column.meta" dashed position="is-left" type="is-dark">
144+
{{ column.label }}
145+
</b-tooltip>
146+
</template>
147+
<!--<a :href="'https://academic.microsoft.com/paper/' + props.row.Id + '/reference'">{{ props.row.numRefs }}</a>-->
148+
<b-tooltip label="Open new graph for these references" position="is-left" type="is-dark">
149+
<b-button @click.stop="clickOpenReferences(props.row.Id)" type="is-primary" size="is-small"
150+
:inverted="(selectedInputArticle == props.row) ? true : false"
151+
:disabled="(props.row.numRefs == 0) ? true : false">
152+
{{ props.row.numRefs }} ↻
153+
</b-button>
154+
</b-tooltip>
155+
</b-table-column>
156+
</template>
157+
</b-table>
158+
</b-tab-item>
159+
<b-tab-item>
160+
<template slot="header"><h2 class="title is-4">Suggested articles ({{ suggestedArticles.length }})</h2></template>
161+
<b-table :data="suggestedArticles" default-sort="inDegree" default-sort-direction="desc" :selected.sync="selectedSuggestedArticle" hoverable striped narrowed focusable>
162+
<template slot-scope="props">
163+
<!-- id is for scrolling to row when network node is clicked -->
164+
<b-table-column :id="props.row.Id" field="DN" label="Title" sortable>
165+
<a :href="'https://doi.org/' + props.row.DOI" target="_blank">{{ props.row.DN }}</a>
166+
</b-table-column>
167+
<b-table-column field="ANF" label="First Author" sortable>
168+
<b-tooltip dashed multilined :label="props.row.ANF.map(x=>x.FN + ' ' + x.LN).join(', ')" position="is-right" type="is-dark">
169+
{{ props.row.ANF[0].LN }}
170+
</b-tooltip>
171+
</b-table-column>
172+
<b-table-column field="Y" label="Year" sortable>{{ props.row.Y }}</b-table-column>
173+
<b-table-column field="BV" label="Journal" sortable>{{ props.row.BV }}</b-table-column>
174+
<b-table-column field="ECC" label="Citations" meta="Estimated global citations" sortable>
175+
<template slot="header" slot-scope="{ column }">
176+
<b-tooltip :label="column.meta" dashed position="is-left" type="is-dark">
177+
{{ column.label }}
178+
</b-tooltip>
179+
</template>
180+
<b-tooltip label="Open citations in Microsoft Academic" dashed position="is-left" type="is-dark">
181+
<a :href="'https://academic.microsoft.com/paper/' + props.row.Id + '/citedby'" target="_blank">{{ props.row.ECC }}</a>
182+
</b-tooltip>
183+
</b-table-column>
184+
<b-table-column field="inDegree" label="Deg" meta="InDegree: Number of incoming edges in graph (citations)" sortable>
185+
<template slot="header" slot-scope="{ column }">
186+
<b-tooltip :label="column.meta" dashed position="is-left" type="is-dark">
187+
{{ column.label }}
188+
</b-tooltip>
189+
</template>
190+
{{ props.row.inDegree }}
191+
</b-table-column>
192+
<b-table-column field="numRefs" label="Refs" meta="References in paper" sortable>
193+
<template slot="header" slot-scope="{ column }">
194+
<b-tooltip :label="column.meta" dashed position="is-left" type="is-dark">
195+
{{ column.label }}
196+
</b-tooltip>
197+
</template>
198+
<!--<a :href="'https://academic.microsoft.com/paper/' + props.row.Id + '/reference'">{{ props.row.numRefs }}</a>-->
199+
<b-tooltip label="Open new graph for these references" position="is-left" type="is-dark">
200+
<b-button @click.stop="clickOpenReferences(props.row.Id)" type="is-primary" size="is-small"
201+
:inverted="(selectedSuggestedArticle == props.row) ? true : false"
202+
:disabled="(props.row.numRefs == 0) ? true : false">
203+
{{ props.row.numRefs }} ↻
204+
</b-button>
205+
</b-tooltip>
206+
</b-table-column>
207+
</template>
208+
</b-table>
209+
</b-tab-item>
210+
</b-tabs>
211+
212+
<b-tabs class="column" size="is-small">
213+
<b-tab-item>
214+
<template slot="header">
215+
<h2 class="title is-4">Reference network</h2>
216+
</template>
217+
<div id="referenceNetwork" style="height: 100%; overflow:auto"></div>
218+
<span style="position:absolute; top: 0px">newer</span>
219+
<span style="position:absolute; bottom: 0px">older</span>
220+
</b-tab-item>
221+
</b-tabs>
222+
</div>
223+
<b-loading :is-full-page="true" :active.sync="isLoading"></b-loading>
224+
</section>
225+
226+
<script src="index.js"></script>
227+
</body>
228+
</html>

0 commit comments

Comments
 (0)