Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dataset thumbnail #487

Merged
merged 5 commits into from
Nov 18, 2022
Merged

Add dataset thumbnail #487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f095978
include dataset thumbnail as popup on map. also resolved console erro…
Nov 17, 2022
fc87882
switch to image overlay instead of popup
Nov 17, 2022
20cc2b7
check for 'thumbnail' tag as well, make a little cleaner
Nov 18, 2022
a8e8165
make thumbnail url a jinja filter
Nov 18, 2022
1850555
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ It will now be viewable on [http://localhost:8090](https://localhost:8090)

These directions are for running from a local folder in development. But it will run from any typical Python WSGI server.

Firstly, install the Open Data Cube. Use of a [Data Cube conda environment](https://datacube-core.readthedocs.io/en/latest/ops/conda.html)
is recommended.
Firstly, install the Open Data Cube. Use of a [Data Cube conda environment](https://datacube-core.readthedocs.io/en/latest/installation/setup/common_install.html)
is recommended. You may need to also `conda install -c conda-forge postgis`

Test that you can run `datacube system check`, and that it's connecting
to the correct datacube instance.
Expand Down
12 changes: 12 additions & 0 deletions cubedash/_filters.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,18 @@ def _dataset_file_paths(dataset: Dataset):
return utils.get_dataset_file_offsets(dataset)


@bp.app_template_filter("dataset_thumbnail_url")
def _dataset_thumbnail_url(dataset: Dataset):
file_paths = _dataset_file_paths(dataset)
if "thumbnail:nbart" in file_paths:
offset = file_paths["thumbnail:nbart"]
elif "thumbnail" in file_paths:
offset = file_paths["thumbnail"]
else:
return ""
return _to_remote_url(offset, dataset.uris[0])


@bp.app_template_filter("resolve_remote_url")
def _to_remote_url(offset: str, base_uri: str = None):
return utils.as_resolved_remote_url(base_uri, offset)
Expand Down
99 changes: 53 additions & 46 deletions cubedash/templates/dataset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
{% block title %}{{ dataset | printable_dataset }}{% endblock %}

{% set extent_geojson = dataset_footprint.__geo_interface__ %}
{% set thumbnail_url = dataset | dataset_thumbnail_url %}

{% block head %}
{{ super() }}
Expand Down Expand Up @@ -57,51 +58,18 @@ <h2 class="followed"><strong>{{ dataset | printable_dataset }}</strong></h2>
</div>
<div class="sub-header">
{% if dataset_region_code %}
Region
<a href="{{ url_for('region_page', region_code=dataset_region_code, product_name=dataset.type.name)}}">
{{- dataset_region_code -}}
</a>
{% endif %}
Region
<a href="{{ url_for('region_page', region_code=dataset_region_code, product_name=dataset.type.name)}}">
{{- dataset_region_code -}}
</a>
{% endif %}
for
{{ dataset | dataset_day_link(grouping_timezone) }}
</div>
</div>

{% if source_datasets or derived_datasets %}
<div class="panel">
{% for classifier, s_dataset in source_datasets.items() %}
<div>
<span title="Source '{{ classifier }}'">
<i class="fa fa-level-up fa-flip-horizontal" aria-hidden="true"></i>
<a href="{{ url_for('dataset.dataset_page', id_=s_dataset.id) }}">
{{ s_dataset | printable_dataset }}
</a>
</span>
</div>
{% endfor %}
{% if source_dataset_overflow %}
<span title="Too many to display">... {{ source_dataset_overflow }} more</span>
{% endif %}
<div class="tree-node">
<strong class="active-tree-node">
<i class="fa fa-caret-right" aria-hidden="true"></i>
{{ dataset | printable_dataset }}
</strong>
{% for d_dataset in derived_datasets %}
<div class="tree-node">
<span title="Derived {{ d_dataset.type.name }}">
<i class="fa fa-level-down" aria-hidden="true"></i>
<a href="{{ url_for('dataset.dataset_page', id_=d_dataset.id) }}">
{{ d_dataset | printable_dataset }}
</a>
</span>
</div>
{% endfor %}
{% if derived_dataset_overflow %}
<span title="Too many to display">... {{ derived_dataset_overflow}} more</span>
{% endif %}
</div>
</div>
{% if extent_geojson %}
<div id="dataset-map"></div>
{% endif %}

<div class="panel odd">
Expand All @@ -117,11 +85,48 @@ <h3>
) }}
</div>

{% if extent_geojson %}
<div id="dataset-map"></div>
{% if source_datasets or derived_datasets %}
<div class="panel">
<h3>
Related Datasets
{{ hanchor('related-datasets') }}
</h3>
{% for classifier, s_dataset in source_datasets.items() %}
<div>
<span title="Source '{{ classifier }}'">
<i class="fa fa-level-up fa-flip-horizontal" aria-hidden="true"></i>
<a href="{{ url_for('dataset.dataset_page', id_=s_dataset.id) }}">
{{ s_dataset | printable_dataset }}
</a>
</span>
</div>
{% endfor %}
{% if source_dataset_overflow %}
<span title="Too many to display">... {{ source_dataset_overflow }} more</span>
{% endif %}
<div class="tree-node">
<strong class="active-tree-node">
<i class="fa fa-caret-right" aria-hidden="true"></i>
{{ dataset | printable_dataset }}
</strong>
{% for d_dataset in derived_datasets %}
<div class="tree-node">
<span title="Derived {{ d_dataset.type.name }}">
<i class="fa fa-level-down" aria-hidden="true"></i>
<a href="{{ url_for('dataset.dataset_page', id_=d_dataset.id) }}">
{{ d_dataset | printable_dataset }}
</a>
</span>
</div>
{% endfor %}
{% if derived_dataset_overflow %}
<span title="Too many to display">... {{ derived_dataset_overflow}} more</span>
{% endif %}
</div>
</div>
{% endif %}

<div class="panel overflowable">
<div class="panel odd overflowable">
<h3>
Location{% if dataset.uris | length > 1 %}s{% endif %}
{{ hanchor('locations') }}
Expand Down Expand Up @@ -166,7 +171,7 @@ <h3>



<div class="panel odd overflowable">
<div class="panel overflowable">
<h3 class="followed">
Metadata Document
{{ hanchor('metadata-doc') }}
Expand Down Expand Up @@ -194,10 +199,9 @@ <h3 class="followed">
' &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
}
);

var coords = [];
const dataset_data = L.geoJson({{ extent_geojson | torapidjson }},
{
interactive: false,
style: function (feature) {
return {
color: "#1d81a7",
Expand All @@ -219,6 +223,9 @@ <h3 class="followed">
});
L.control.zoom({position: "bottomright"}).addTo(map);
map.fitBounds(dataset_data.getBounds(), {animate: false, maxZoom: 5});
if ("{{ thumbnail_url }}") {
L.imageOverlay("{{ thumbnail_url }}", dataset_data.getBounds()).addTo(map);
}

window.MAP = map;
</script>
Expand Down
26 changes: 14 additions & 12 deletions cubedash/templates/layout/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,19 +226,21 @@
);

var showHiddenProduct = document.getElementById("show-hidden-product");
showHiddenProduct.addEventListener("click", function(event) {
if (showHiddenProduct.innerHTML === "Show hidden products") {
showHiddenProduct.innerHTML = "Show non-hidden products";
} else {
showHiddenProduct.innerHTML = "Show hidden products";
}
document.querySelectorAll(".datacube-product-name").forEach(function(el) {
el.classList.toggle("hide");
});
document.querySelectorAll(".configured-hide-product").forEach(function(el) {
el.classList.toggle("hide");
if (showHiddenProduct) {
showHiddenProduct.addEventListener("click", function(event) {
if (showHiddenProduct.innerHTML === "Show hidden products") {
showHiddenProduct.innerHTML = "Show non-hidden products";
} else {
showHiddenProduct.innerHTML = "Show hidden products";
}
document.querySelectorAll(".datacube-product-name").forEach(function(el) {
el.classList.toggle("hide");
});
document.querySelectorAll(".configured-hide-product").forEach(function(el) {
el.classList.toggle("hide");
});
});
});
}

</script>
</body>
Expand Down