Skip to content

Commit

Permalink
Merge pull request #41 from source-data/EEB7/initial-ux-rework
Browse files Browse the repository at this point in the history
EEB7: Initial UX rework
  • Loading branch information
eidens authored Nov 30, 2023
2 parents d9fe119 + a2c7fbc commit 614ad74
Show file tree
Hide file tree
Showing 24 changed files with 513 additions and 942 deletions.
20 changes: 10 additions & 10 deletions frontend/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<template lang="pug">
v-app
LeftSideBar
TopNavBar
v-main(style="padding-left:56px")
v-container(fluid).main-content
router-view
v-footer
Footer
v-app
TopNavBar
v-main
v-container.main-content
router-view
v-footer
Footer
</template>

<script>
Expand Down Expand Up @@ -59,8 +58,9 @@ a {
}
// make the main container fluid up to a certain size
.container.container--fluid.main-content {
max-width: 1200px;
.container.main-content {
max-width: 100%;
width: 100%;
padding: 0;
}
</style>
77 changes: 77 additions & 0 deletions frontend/src/components/filtering/by-reviewing-service.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<template lang="pug">
v-card(flat)
v-card-title Review sources
v-card-text
v-chip-group(v-model="selectedRev" mandatory column)
span(v-for="serviceId in this.reviewingList" :key="`${serviceId}-chip`")
router-link(:to="{ path: `/refereed-preprints/${serviceId2Slug(serviceId)}` }")
v-chip(
:value="serviceId2Slug(serviceId)" :disabled="loadingRecords"
)
| {{ serviceId2Name(serviceId) }}

InfoCardsReviewServiceSummaryGraph(
:service_name="serviceId2Name(serviceSlug2Id(selectedRev))",
:url="reviewingService(serviceSlug2Id(selectedRev)).url",
:peer_review_policy="reviewingService(serviceSlug2Id(selectedRev)).peer_review_policy",
:review_requested_by="reviewingService(serviceSlug2Id(selectedRev)).review_requested_by",
:reviewer_selected_by="reviewingService(serviceSlug2Id(selectedRev)).reviewer_selected_by",
:review_coverage="reviewingService(serviceSlug2Id(selectedRev)).review_coverage",
:reviewer_identity_known_to="reviewingService(serviceSlug2Id(selectedRev)).reviewer_identity_known_to",
:competing_interests="reviewingService(serviceSlug2Id(selectedRev)).competing_interests",
:public_interaction="reviewingService(serviceSlug2Id(selectedRev)).public_interaction",
:opportunity_for_author_response="reviewingService(serviceSlug2Id(selectedRev)).opportunity_for_author_response",
:recommendation="reviewingService(serviceSlug2Id(selectedRev)).recommendation",
).px-0.mt-2
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { serviceId2Slug, serviceId2Name, serviceSlug2Id } from '../../store/by-reviewing-service'
import InfoCardsReviewServiceSummaryGraph from '../review-service-info/review-service-summary-graph.vue'
export default {
components: {
InfoCardsReviewServiceSummaryGraph,
},
data () {
return {
selectedRev: undefined,
}
},
beforeMount () {
this.selectedRev = this.$route.params.service
},
computed: {
...mapState('highlights', ['loadingRecords']),
...mapGetters('byReviewingService', ['records', 'reviewingService']),
reviewingList () {
const ids = this.records.map(
(r) => {return r.id}
).sort().reverse()
return ids
},
},
methods: {
onSelect (selectedItemId) {
this.$emit('change', selectedItemId)
},
reviewingListId(i, j) {
return this.reviewingList[(i-1)*2 + (j-1)]
},
serviceId2Slug,
serviceId2Name,
serviceSlug2Id
},
}
</script>

<style lang="scss" scoped>
/* After the user clicks on a reviewing service's button, all rev service buttons are disabled.
* This makes the clicked-on-but-disabled button distinct from all the other disabled buttons.
*/
.v-btn--active.v-btn--disabled::before {
opacity: 0.5 !important;
}
</style>
31 changes: 31 additions & 0 deletions frontend/src/components/filtering/by-simple-search-query.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<template lang="pug">
v-text-field(
v-model="query"
:loading="loadingRecords"
placeholder="keywords, authors, doi"
prepend-icon="mdi-magnify"
hide-details
@keyup.enter="onSubmit"
)
</template>

<script>
import { mapState } from 'vuex'
export default {
data: function() {
return {
query: ''
}
},
computed: {
...mapState('fulltextSearch', ['loadingRecords'])
},
methods: {
onSubmit() {
this.$store.dispatch('fulltextSearch/search', this.query).then(
() => {this.$store.dispatch('highlights/listByCurrent', 'fulltextSearch')}
)
},
}
}
</script>
69 changes: 35 additions & 34 deletions frontend/src/components/highlights/index.vue
Original file line number Diff line number Diff line change
@@ -1,47 +1,52 @@
<template lang="pug">
div
v-row(justify="center" v-if="loadingRecords")
v-progress-circular(:size="70" :width="7" color="purple" indeterminate)
div(v-else="loadingRecords")
div.d-flex.ml-auto.mr-auto
v-container(v-if="loadingRecords")
v-progress-circular(:size="70" :width="7" color="purple" indeterminate)

span(v-if="!loadingRecords")
v-container(fluid v-if="records.length > 0" :class="{'highlights-loading': loadingRecords}")
h1 {{ records.length }} articles found:
h1(v-if="records.length == 0 && !loadingRecords") No results
h2 {{ records.length }} articles found
v-container(fluid v-if="records.length == 0 && !loadingRecords")
h2(v-if="records.length == 0 && !loadingRecords") No results
v-container(fluid :class="{'highlights-loading': loadingRecords}")
v-row(align="center" justify="start")
v-col(cols=1)
.text-right
small Pages:
v-col(cols=6)
v-col(cols=8).px-0.d-flex
v-pagination(
v-model="pageNumber"
:length="pageCount"
:total-visible="10"
)
v-col(cols=1 v-if="selectedTab == refereedPreprintsTabName")
.text-right
small.text-right Sort by:
v-col(cols=2 v-else-if="selectedTab !== automagicTabName")
small.text-right Sort direction:
v-col(cols=3 v-if="selectedTab == refereedPreprintsTabName" )
v-row
v-col.d-flex
v-btn-toggle(v-model="sortBy" @change="sortRecords")
v-btn(x-small outlined value="pub_date")
| preprint date
v-btn(
x-small outlined value="posting_date")
| reviewing date
v-col(cols=1 v-if="selectedTab !== automagicTabName")
v-btn-toggle(v-model="sortDirection" @change="sortRecords" mandatory)
v-btn(x-small icon aria-label="descending" value="desc")
v-icon(dense) mdi-sort-descending
v-btn(x-small icon aria-label="ascending" value="asc")
v-icon(dense) mdi-sort-ascending
v-tooltip(bottom transition="fade-transition")
template(v-slot:activator="{ on, hover, attrs }")
v-btn(x-small v-bind="attrs" v-on="on" outlined value="pub_date")
| preprint date
span Sort by preprint date
v-tooltip(bottom transition="fade-transition")
template(v-slot:activator="{ on, hover, attrs }")
v-btn(x-small outlined value="posting_date" v-bind="attrs" v-on="on")
| reviewing date
span Sort by revewing date

v-btn-toggle(v-model="sortDirection" @change="sortRecords" mandatory).ml-3
v-tooltip(right transition="fade-transition")
template(v-slot:activator="{ on, hover, attrs }")
v-btn(x-small v-bind="attrs" v-on="on" icon aria-label="descending" value="desc")
v-icon(dense) mdi-sort-descending
span Show latest first
v-tooltip(right transition="fade-transition")
template(v-slot:activator="{ on, hover, attrs }")
v-btn(x-small v-bind="attrs" v-on="on" icon aria-label="ascending" value="asc")
v-icon(dense) mdi-sort-ascending
span Sort earliest first

v-row(v-for="article in paginatedRecords" :key="article.id")
v-col
HighlightedListItem(:article="article")
v-row(justify="start")
v-col(cols=1)
.text-right Pages:
v-col(cols=6)
v-col(cols=6).px-0.d-flex
v-pagination(
v-model="pageNumber"
:length="pageCount"
Expand All @@ -51,7 +56,6 @@

<script>
import HighlightedListItem from './list-item.vue'
import { REFEREED_PREPRINTS, AUTOMAGIC, AUTO_TOPICS } from '../quick-access/tab-names'
import { mapGetters, mapState } from 'vuex'
Expand All @@ -67,9 +71,6 @@ export default {
computed: {
...mapGetters('highlights', ['records', 'selectedTab']),
...mapState('highlights', ['loadingRecords']),
refereedPreprintsTabName () {return REFEREED_PREPRINTS},
automagicTabName () {return AUTOMAGIC},
autotopcisTabName () {return AUTO_TOPICS},
pageNumber: {
get() {
return this.$store.getters['highlights/currentPage']
Expand Down
120 changes: 66 additions & 54 deletions frontend/src/components/highlights/list-item.vue
Original file line number Diff line number Diff line change
@@ -1,61 +1,65 @@
<template lang="pug">
v-card(v-if="article" color="blue-grey lighten-5")
v-card-title
div
| {{ article.title }}
router-link(:to="generateMyUrl()")
v-icon(color="indigo lighten-3") mdi-link-variant
v-card-subtitle
p {{ authorList }}
p
| Posted
|
b {{ displayDate(article.pub_date) }}
| on
|
i {{ article.journal }}
|
a(:href="href(article.doi)" target="_blank" rel="noopener" class="ml-2")
|
| doi.org/{{ article.doi }}
v-card(v-if="article" color="blue-grey lighten-5")
v-card-title
div
| {{ article.title }}
router-link(:to="generateMyUrl()")
v-icon(color="indigo lighten-3").ml-1 mdi-link-variant
v-card-subtitle
p.mb-0 {{ authorList }}

v-card-text
v-container(fluid).article-content
//- Vertical 1-col layout with review process first, abstract second on smaller screens, horizontal 2-col layout
//- with abstract left, review process right on larger screens. Entities always at the bottom in single column.
v-row(v-if="showReviewProcess")
v-col(order="2" order-md="1" cols="12" md="7")
v-card.article-card
v-card-title Abstract
v-card-text
p(class="text--primary") {{ article.abstract }}
div.d-flex.flex-row.align-center
v-list-item.px-0
span.d-flex.flex-row.no-pointer-events
v-chip-group(v-if="article.main_topics.length > 0" :key="0" column)
v-chip(v-for="(item, index) in article.main_topics" small outlined :key="`topics-${index}`").purple--text {{ item.slice(0,3).join(", ") }}
v-chip-group(v-if="article.highlighted_entities.length > 0" :key="1" column)
v-chip(v-for="(item, index) in article.highlighted_entities" small outlined :key="`highlighted-entities-${index}`").red--text {{ item }}
v-chip-group(v-if="article.entities.length > 0" :key="2" column)
v-chip(v-for="(item, index) in article.entities" small outlined :key="`entities-${index}`").orange--text {{ item }}
v-chip-group(v-if="article.assays.length > 0" :key="3" column)
v-chip(v-for="(item, index) in article.assays" small outlined :key="`assays-${index}`").green--text {{ item }}

v-tooltip(bottom)
template(v-slot:activator="{ on, hover, attrs }")
span(v-bind="attrs" v-on="on")
v-icon(color="grey-lighten-1") mdi-information-outline
span
h3 Keywords deduced from the figures.
p(style="max-width: 200px;") Green text means this, orange text means that...

p
| Posted
|
b {{ displayDate(article.pub_date) }}
| on
|
i {{ article.journal }}
|
a(:href="href(article.doi)" target="_blank" rel="noopener" class="ml-2")
|
| doi.org/{{ article.doi }}

v-col(order="1" order-md="2" cols="12" md="5")
div.review-process
render-rev(:ref='article.doi')
v-row(v-else)
v-col
v-card.article-card
v-card-title Abstract
v-card-text
p(class="text--primary") {{ article.abstract }}
v-card-text
v-container(fluid).article-content
//- Vertical 1-col layout with review process first, abstract second on smaller screens, horizontal 2-col layout
//- with abstract left, review process right on larger screens. Entities always at the bottom in single column.
v-row(v-if="showReviewProcess")
v-col(order="2" order-md="1" cols="12" md="7")
v-card.article-card
v-card-title Abstract
v-card-text
p(class="text--primary") {{ article.abstract }}

v-row
v-col
v-card.article-card(v-if="(article.assays.length > 0) || (article.entities.length > 0) || (article.highlighted_entities.length > 0)")
v-card-title From the figures
v-card-text
v-list-item
v-chip-group(v-if="article.main_topics.length > 0" :key="0" column)
v-chip(v-for="(item, index) in article.main_topics" small outlined :key="`topics-${index}`").purple--text {{ item.slice(0,3).join(", ") }}
v-chip-group(v-if="article.highlighted_entities.length > 0" :key="1" column)
v-chip(v-for="(item, index) in article.highlighted_entities" small outlined :key="`highlighted-entities-${index}`").red--text {{ item }}
v-chip-group(v-if="article.entities.length > 0" :key="2" column)
v-chip(v-for="(item, index) in article.entities" small outlined :key="`entities-${index}`").orange--text {{ item }}
v-chip-group(v-if="article.assays.length > 0" :key="3" column)
v-chip(v-for="(item, index) in article.assays" small outlined :key="`assays-${index}`").green--text {{ item }}
v-card.article-card(v-else)
v-card-subtitle Figure not yet processed
v-col(order="1" order-md="2" cols="12" md="5")
div.review-process
render-rev(:ref='article.doi')
v-row(v-else)
v-col
v-card.article-card
v-card-title Abstract
v-card-text
p(class="text--primary") {{ article.abstract }}
</template>

<script>
Expand Down Expand Up @@ -184,4 +188,12 @@ export default {
padding: 0;
}
}
.v-chip.v-chip--outlined.v-chip.v-chip {
background-color: white !important;
}
.no-pointer-events {
pointer-events: none;
}
</style>
Loading

0 comments on commit 614ad74

Please sign in to comment.