Skip to content

Commit

Permalink
Split datasets in Explore page modal into categories
Browse files Browse the repository at this point in the history 
Fixes #206.
  • Loading branch information
@zarino @struan
zarino authored and struan committed Jan 22, 2024
1 parent 387edc2 commit 7df2e5f
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 68 deletions.
12 changes: 12 additions & 0 deletions hub/static/css/_explore.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,18 @@ $osm-sea-blue: rgb(168, 212, 243);
background: $osm-sea-blue;
}

.explore-modal {
// Full-width modal, even on large screens.
.modal-dialog {
margin: var(--#{$prefix}modal-margin);
max-width: none;
}

.list-group {
--#{$prefix}list-group-item-padding-y: 0.75em;
}
}

@include media-breakpoint-up(md) {
.explore {
height: calc( 100vh - 100px );
Expand Down
48 changes: 25 additions & 23 deletions hub/static/js/explore.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ const app = createApp({

currentType: 'filter', // what to add from the Add Dataset modal (filter, shader, or column)
searchText: '', // filter datasets by name in the Add Dataset modal
browseDatasets: false, // show the full list of datasets in the Add Dataset modal?
sortBy: 'Constituency Name', // column to use to sort the table
sortOrder: 1, // sort order direction - 1 for ascending, 0 for descending
downloadCsvWithNextTableUpdate: false,
Expand All @@ -47,25 +46,19 @@ const app = createApp({
modal() {
return new Modal(this.$refs.modal)
},
favouriteDatasets() {
return this.datasets.filter((d) => {
return ( d.is_favourite === true ) && this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d)
})
},
featuredDatasets() {
return this.datasets.filter((d) => {
return ( d.featured === true ) && this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d)
})
},
availableOtherDatasets() {
return this.datasets.filter((d) => {
return ( d.is_favourite === false && d.featured === false ) && this.datasetIsSelectable(d)
})
},
otherDatasets() {
return this.datasets.filter((d) => {
return ( d.is_favourite === false && d.featured === false ) && ( this.browseDatasets == true || this.searchText != '' ) && this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d)
selectableDatasets() {
let categories = {
mp: [],
opinion: [],
place: [],
movement: []
}
this.datasets.forEach((d) => {
if ( this.datasetMatchesSearchText(d) && this.datasetIsSelectable(d) ) {
categories[d.category].push(d)
}
})
return categories
},
mapViewActive() {
return this.view == 'map'
Expand Down Expand Up @@ -99,9 +92,12 @@ const app = createApp({
this.$refs.filtersContainer.removeAttribute('hidden')
this.$refs.shaderContainer.removeAttribute('hidden')
this.$refs.columnContainer.removeAttribute('hidden')
this.$refs.modal.addEventListener('shown.bs.modal', (e) => {
this.$refs.modal.querySelector('.search-input input').focus()
this.$refs.modal.querySelector('.modal-body:last-child').scrollTop = 0
})
this.$refs.modal.addEventListener('hidden.bs.modal', (e) => {
this.searchText = ''
this.browseDatasets = false
})

window.vuethis = this;
Expand All @@ -122,6 +118,15 @@ const app = createApp({
d["stats"] = d["stats"][area_type]
}
})
datasets = datasets.sort((a, b) => {
if (a.is_favourite != b.is_favourite) {
return a.is_favourite ? -1 : 1
} else if (a.is_featured != b.is_featured) {
return a.is_featured ? -1 : 1
} else {
return a.title.localeCompare(b.title)
}
})
this.datasets = datasets
})
},
Expand Down Expand Up @@ -233,9 +238,6 @@ const app = createApp({
this.key = null
this.legend = null
},
toggleBrowseDatasets() {
this.browseDatasets = !this.browseDatasets
},
state() {
const state = {}

Expand Down
12 changes: 7 additions & 5 deletions hub/templates/hub/includes/add-data-modal-button.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<button @click="addFilterOrShader(dataset.name)" class="list-group-item list-group-item-action" :class="{ 'bg-red-100': !dataset.areas_available.includes(area_type) }">
<div class="d-flex align-items-center">
<strong class="me-auto pe-3">${ dataset.title }</strong>
<span v-if="dataset.is_favourite" class="text-gray-500">
<button @click="addFilterOrShader(dataset.name)" class="list-group-item list-group-item-action">
<div class="d-flex align-items-center mb-2">
<strong class="lh-sm me-auto pe-3">${ dataset.title }</strong>
<span v-if="dataset.is_favourite" class="text-gray-500 d-flex">
{% include 'hub/includes/icons/heart-full.html' %}
</span>
</div>
<small v-if="dataset.description" class="d-block fs-7 mb-2">
${ dataset.description }
</small>
<small class="d-block text-muted fs-8">
<template v-if="dataset.description">${ dataset.description }</template>
${ dataset.source_label }
<template v-if="dataset.release_date">Updated ${ dataset.release_date }.</template>
</small>
Expand Down
76 changes: 47 additions & 29 deletions hub/templates/hub/includes/add-data-modal.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,62 @@
<div class="modal fade" tabindex="-1" ref="modal">
<div class="modal fade explore-modal" tabindex="-1" ref="modal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content overflow-hidden shadow-lg">
<div class="modal-content h-100 overflow-hidden shadow-lg">
<div class="modal-header">
<h2 class="modal-title h5 lh-1">Add ${ currentType }</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-gray-100">
<div class="modal-body bg-gray-100 flex-grow-0 flex-shrink-0">
<div class="search-input w-100">
{% include 'hub/includes/icons/search.html' %}
<input type="search" class="form-control" placeholder="Find a dataset…" aria-label="Find a dataset…" v-model="searchText">
</div>
<div v-if="!datasetsLoaded" class="mt-3 text-center">
Loading…
</div>
<div v-if="favouriteDatasets.length">
<h3 class="h6 mt-4 text-primary">Your favourite datasets</h3>
<div class="list-group mt-3">
<template v-for="dataset in favouriteDatasets">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
<div class="modal-body bg-gray-100 pt-0">
<div class="row">
<div class="col-sm-6 col-lg-3">
<h3 class="h5 my-3 text-primary">MP</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.mp.length" class="list-group">
<template v-for="dataset in selectableDatasets.mp">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
</div>
<div v-if="featuredDatasets.length">
<h3 class="h6 mt-4 text-primary">Popular datasets</h3>
<div class="list-group mt-3">
<template v-for="dataset in featuredDatasets">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
<div class="col-sm-6 col-lg-3">
<h3 class="h5 my-3 text-primary">Public opinion</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.opinion.length" class="list-group">
<template v-for="dataset in selectableDatasets.opinion">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
</div>
<div v-if="otherDatasets.length">
<h3 class="h6 mt-4 text-primary">More datasets</h3>
<div class="list-group mt-3">
<template v-for="dataset in otherDatasets">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
<div class="col-sm-6 col-lg-3">
<h3 class="h5 my-3 text-primary">Place</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.place.length" class="list-group">
<template v-for="dataset in selectableDatasets.place">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<h3 class="h5 my-3 text-primary">Movement</h3>
<div v-if="!datasetsLoaded">
<p class="text-muted">Loading datasets…</p>
</div>
<div v-else-if="selectableDatasets.movement.length" class="list-group">
<template v-for="dataset in selectableDatasets.movement">
{% include 'hub/includes/add-data-modal-button.html' %}
</template>
</div>
</div>
</div>
<div v-else-if="!searchText && availableOtherDatasets.length > 0">
<button class="btn btn-link mt-3 w-100" @click="toggleBrowseDatasets()">Browse more datasets</button>
</div>
</div>
</div>
Expand Down
23 changes: 12 additions & 11 deletions hub/views/explore.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,24 +74,23 @@ def render_to_response(self, context, **response_kwargs):

is_favourite = False
if not is_non_member:
is_favourite = (
UserDataSets.objects.filter(
data_set=d,
user=self.request.user,
).exists(),
)
is_favourite = UserDataSets.objects.filter(
data_set=d,
user=self.request.user,
).exists()

ds = dict(
scope=scope,
name=d.name,
title=d.label,
description=d.description,
category=d.category or "mp",
source=d.source,
source_label=d.source_label,
is_favourite=is_favourite,
is_filterable=d.is_filterable,
is_shadable=d.is_shadable,
featured=d.featured,
is_featured=d.featured,
comparators=dict(
map(itemgetter("field_lookup", "title"), d.comparators)
),
Expand Down Expand Up @@ -121,27 +120,29 @@ def render_to_response(self, context, **response_kwargs):
datasets.append(
{
"scope": "public",
"featured": False,
"is_featured": False,
"is_favourite": False,
"is_filterable": False,
"is_shadable": False,
"category": "mp",
"name": "mp_name",
"title": "MP Name",
"source": "Wikipedia",
"source_label": "Data from Wikipedia.",
"areas_available": ["WMC"],
}
)

datasets.append(
{
"scope": "public",
"featured": False,
"is_featured": False,
"is_favourite": False,
"is_filterable": False,
"is_shadable": False,
"category": "place",
"name": "gss",
"title": "Constituency GSS code",
"source": "mySociety",
"source_label": "Data from mySociety.",
"areas_available": ["WMC", "WMC23"],
}
)
Expand Down

0 comments on commit 7df2e5f

Please sign in to comment.