From 7af6a998ef8b24d36065aaa0f716b65a95b47606 Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Wed, 13 Sep 2017 14:21:01 -0400 Subject: [PATCH 1/6] Lint * Rename `activeCatalog` -> `catalog`, since for a result detail there is only one catalog, so the additional qualifier is waste. * Rename `cuahsiSearchResult` -> `searchResultCuahsi` so when the files are sorted, it shows up near `searchResult` which is the default implementation. --- .../js/src/data_catalog/templates/resultDetails.html | 4 ++-- ...cuahsiSearchResult.html => searchResultCuahsi.html} | 0 src/mmw/js/src/data_catalog/views.js | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) rename src/mmw/js/src/data_catalog/templates/{cuahsiSearchResult.html => searchResultCuahsi.html} (100%) diff --git a/src/mmw/js/src/data_catalog/templates/resultDetails.html b/src/mmw/js/src/data_catalog/templates/resultDetails.html index aa8fef787..a14a5eabd 100644 --- a/src/mmw/js/src/data_catalog/templates/resultDetails.html +++ b/src/mmw/js/src/data_catalog/templates/resultDetails.html @@ -14,7 +14,7 @@

{{ author }}

{% endif %} - {% if activeCatalog != 'cuahsi' %} + {% if catalog != 'cuahsi' %}

{{ created_at|toDateFullYear }}

@@ -33,7 +33,7 @@

{{ description }}

- {% if activeCatalog == 'cinergi' %} + {% if catalog == 'cinergi' %}  Repository diff --git a/src/mmw/js/src/data_catalog/templates/cuahsiSearchResult.html b/src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html similarity index 100% rename from src/mmw/js/src/data_catalog/templates/cuahsiSearchResult.html rename to src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js index ac8ffb3c7..7546fed53 100644 --- a/src/mmw/js/src/data_catalog/views.js +++ b/src/mmw/js/src/data_catalog/views.js @@ -10,7 +10,7 @@ var $ = require('jquery'), formTmpl = require('./templates/form.html'), pagerTmpl = require('./templates/pager.html'), searchResultTmpl = require('./templates/searchResult.html'), - cuahsiSearchResultTmpl = require('./templates/cuahsiSearchResult.html'), + searchResultCuahsiTmpl = require('./templates/searchResultCuahsi.html'), tabContentTmpl = require('./templates/tabContent.html'), tabPanelTmpl = require('./templates/tabPanel.html'), headerTmpl = require('./templates/header.html'), @@ -24,7 +24,7 @@ var ENTER_KEYCODE = 13, CATALOG_RESULT_TEMPLATE = { cinergi: searchResultTmpl, hydroshare: searchResultTmpl, - cuahsi: cuahsiSearchResultTmpl, + cuahsi: searchResultCuahsiTmpl, }; var HeaderView = Marionette.LayoutView.extend({ @@ -131,7 +131,7 @@ var DataCatalogWindow = Marionette.LayoutView.extend({ } else { this.detailsRegion.show(new ResultDetailsView({ model: detailResult, - activeCatalog: activeCatalog.id + catalog: activeCatalog.id })); App.map.set({ 'dataCatalogResults': null, @@ -455,12 +455,12 @@ var ResultDetailsView = Marionette.ItemView.extend({ }, initialize: function(options) { - this.activeCatalog = options.activeCatalog; + this.catalog = options.catalog; }, templateHelpers: function() { return { - activeCatalog: this.activeCatalog + catalog: this.catalog }; }, From 7319667a1b5aab8f09e6b7142a820bef13250ca6 Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Wed, 13 Sep 2017 14:49:19 -0400 Subject: [PATCH 2/6] Add catalog-specific result detail templates These will allow us to do really catalog specific things in each detail view. --- ...Details.html => resultDetailsCinergi.html} | 14 --------- .../templates/resultDetailsCuahsi.html | 29 +++++++++++++++++++ .../templates/resultDetailsHydroshare.html | 23 +++++++++++++++ src/mmw/js/src/data_catalog/views.js | 13 +++++++-- 4 files changed, 63 insertions(+), 16 deletions(-) rename src/mmw/js/src/data_catalog/templates/{resultDetails.html => resultDetailsCinergi.html} (63%) create mode 100644 src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html create mode 100644 src/mmw/js/src/data_catalog/templates/resultDetailsHydroshare.html diff --git a/src/mmw/js/src/data_catalog/templates/resultDetails.html b/src/mmw/js/src/data_catalog/templates/resultDetailsCinergi.html similarity index 63% rename from src/mmw/js/src/data_catalog/templates/resultDetails.html rename to src/mmw/js/src/data_catalog/templates/resultDetailsCinergi.html index a14a5eabd..e10a52b4d 100644 --- a/src/mmw/js/src/data_catalog/templates/resultDetails.html +++ b/src/mmw/js/src/data_catalog/templates/resultDetailsCinergi.html @@ -14,30 +14,16 @@

{{ author }}

{% endif %} - {% if catalog != 'cuahsi' %}

{{ created_at|toDateFullYear }}

- {% else %} - {% if begin_date == end_date %} -

- {{ begin_date|toDateWithoutTime }} -

- {% else %} -

- {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }} -

- {% endif %} - {% endif %}

{{ description }}

- {% if catalog == 'cinergi' %}  Repository - {% endif %}

diff --git a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html new file mode 100644 index 000000000..f6b621400 --- /dev/null +++ b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html @@ -0,0 +1,29 @@ +
+
+

+ {{ title }} +

+ + Zoom to extent +
+
+ {% if author %} +

+ {{ author }} +

+ {% endif %} + {% if begin_date == end_date %} +

+ {{ begin_date|toDateWithoutTime }} +

+ {% else %} +

+ {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }} +

+ {% endif %} +

+ {{ description }} +

+
diff --git a/src/mmw/js/src/data_catalog/templates/resultDetailsHydroshare.html b/src/mmw/js/src/data_catalog/templates/resultDetailsHydroshare.html new file mode 100644 index 000000000..aacadd961 --- /dev/null +++ b/src/mmw/js/src/data_catalog/templates/resultDetailsHydroshare.html @@ -0,0 +1,23 @@ +
+
+

+ {{ title }} +

+ + Zoom to extent +
+
+ {% if author %} +

+ {{ author }} +

+ {% endif %} +

+ {{ created_at|toDateFullYear }} +

+

+ {{ description }} +

+
diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js index 7546fed53..31d90268f 100644 --- a/src/mmw/js/src/data_catalog/views.js +++ b/src/mmw/js/src/data_catalog/views.js @@ -15,7 +15,9 @@ var $ = require('jquery'), tabPanelTmpl = require('./templates/tabPanel.html'), headerTmpl = require('./templates/header.html'), windowTmpl = require('./templates/window.html'), - resultDetailsTmpl = require('./templates/resultDetails.html'), + resultDetailsCinergiTmpl = require('./templates/resultDetailsCinergi.html'), + resultDetailsHydroshareTmpl = require('./templates/resultDetailsHydroshare.html'), + resultDetailsCuahsiTmpl = require('./templates/resultDetailsCuahsi.html'), resultsWindowTmpl = require('./templates/resultsWindow.html'), resultMapPopoverTmpl = require('./templates/resultMapPopover.html'); @@ -25,6 +27,11 @@ var ENTER_KEYCODE = 13, cinergi: searchResultTmpl, hydroshare: searchResultTmpl, cuahsi: searchResultCuahsiTmpl, + }, + CATALOG_RESULT_DETAILS_TEMPLATE = { + cinergi: resultDetailsCinergiTmpl, + hydroshare: resultDetailsHydroshareTmpl, + cuahsi: resultDetailsCuahsiTmpl, }; var HeaderView = Marionette.LayoutView.extend({ @@ -444,7 +451,9 @@ var ResultsView = Marionette.CollectionView.extend({ }); var ResultDetailsView = Marionette.ItemView.extend({ - template: resultDetailsTmpl, + getTemplate: function() { + return CATALOG_RESULT_DETAILS_TEMPLATE[this.catalog]; + }, ui: { closeDetails: '.close' From eb40320351196236a8f2c6af251b7775d74fd6e6 Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Thu, 14 Sep 2017 15:37:03 -0400 Subject: [PATCH 3/6] Preserve lists Previously we were joining list values into strings before sending them to the client. This dictated client presentation, and made it difficult to treat the data differently. To allow clients to decide how best to show these lists, they are now sent back as lists. The client template is updated to maintain current behavior. --- src/mmw/apps/bigcz/clients/cuahsi/search.py | 8 ++++---- src/mmw/apps/bigcz/clients/cuahsi/serializers.py | 9 ++++++--- .../src/data_catalog/templates/searchResultCuahsi.html | 2 +- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/mmw/apps/bigcz/clients/cuahsi/search.py b/src/mmw/apps/bigcz/clients/cuahsi/search.py index 770f1b6ba..73208c650 100644 --- a/src/mmw/apps/bigcz/clients/cuahsi/search.py +++ b/src/mmw/apps/bigcz/clients/cuahsi/search.py @@ -156,10 +156,10 @@ def group_series_by_location(series): 'site_name': group[0]['Sitename'], 'latitude': group[0]['latitude'], 'longitude': group[0]['longitude'], - 'sample_mediums': ', '.join(sorted(set([r['samplemedium'] - for r in group]))), - 'concept_keywords': '; '.join(sorted(set([r['conceptKeyword'] - for r in group]))), + 'sample_mediums': sorted(set([r['samplemedium'] + for r in group])), + 'concept_keywords': sorted(set([r['conceptKeyword'] + for r in group])), 'begin_date': min([parse_date(r['beginDate']) for r in group]), 'end_date': max([parse_date(r['endDate']) diff --git a/src/mmw/apps/bigcz/clients/cuahsi/serializers.py b/src/mmw/apps/bigcz/clients/cuahsi/serializers.py index 937be7e07..39a71c8f8 100644 --- a/src/mmw/apps/bigcz/clients/cuahsi/serializers.py +++ b/src/mmw/apps/bigcz/clients/cuahsi/serializers.py @@ -3,15 +3,18 @@ from __future__ import unicode_literals from __future__ import division -from rest_framework.serializers import CharField, DateTimeField +from rest_framework.serializers import (CharField, + DateTimeField, + ListField, + ) from apps.bigcz.serializers import ResourceSerializer class CuahsiResourceSerializer(ResourceSerializer): details_url = CharField() - sample_mediums = CharField() - concept_keywords = CharField() + sample_mediums = ListField(child=CharField()) + concept_keywords = ListField(child=CharField()) service_org = CharField() service_code = CharField() service_url = CharField() diff --git a/src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html b/src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html index 41a088fd1..7dd66856a 100644 --- a/src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html +++ b/src/mmw/js/src/data_catalog/templates/searchResultCuahsi.html @@ -9,7 +9,7 @@

- {{ concept_keywords }} + {{ concept_keywords|join("; ") }}
From 661049d7f858d8f2f5d57191393892a890ed518b Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Thu, 14 Sep 2017 15:38:33 -0400 Subject: [PATCH 4/6] Capture service title and citation These values will be used in the front-end. --- src/mmw/apps/bigcz/clients/cuahsi/models.py | 4 +++- src/mmw/apps/bigcz/clients/cuahsi/search.py | 2 ++ src/mmw/apps/bigcz/clients/cuahsi/serializers.py | 2 ++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/mmw/apps/bigcz/clients/cuahsi/models.py b/src/mmw/apps/bigcz/clients/cuahsi/models.py index bfceacfa4..8a5c757db 100644 --- a/src/mmw/apps/bigcz/clients/cuahsi/models.py +++ b/src/mmw/apps/bigcz/clients/cuahsi/models.py @@ -10,7 +10,7 @@ class CuahsiResource(Resource): def __init__(self, id, description, author, links, title, created_at, updated_at, geom, details_url, sample_mediums, concept_keywords, service_org, service_code, service_url, - begin_date, end_date): + service_title, service_citation, begin_date, end_date): super(CuahsiResource, self).__init__(id, description, author, links, title, created_at, updated_at, geom) @@ -21,5 +21,7 @@ def __init__(self, id, description, author, links, title, self.service_org = service_org self.service_code = service_code self.service_url = service_url + self.service_title = service_title + self.service_citation = service_citation self.begin_date = begin_date self.end_date = end_date diff --git a/src/mmw/apps/bigcz/clients/cuahsi/search.py b/src/mmw/apps/bigcz/clients/cuahsi/search.py index 73208c650..f89f12ae3 100644 --- a/src/mmw/apps/bigcz/clients/cuahsi/search.py +++ b/src/mmw/apps/bigcz/clients/cuahsi/search.py @@ -107,6 +107,8 @@ def parse_record(record, service): service_org=service['organization'], service_code=record['serv_code'], service_url=service['ServiceDescriptionURL'], + service_title=service['Title'], + service_citation=service['citation'], begin_date=record['begin_date'], end_date=record['end_date'] ) diff --git a/src/mmw/apps/bigcz/clients/cuahsi/serializers.py b/src/mmw/apps/bigcz/clients/cuahsi/serializers.py index 39a71c8f8..549a971a0 100644 --- a/src/mmw/apps/bigcz/clients/cuahsi/serializers.py +++ b/src/mmw/apps/bigcz/clients/cuahsi/serializers.py @@ -18,5 +18,7 @@ class CuahsiResourceSerializer(ResourceSerializer): service_org = CharField() service_code = CharField() service_url = CharField() + service_title = CharField() + service_citation = CharField() begin_date = DateTimeField() end_date = DateTimeField() From fb47145c9b77c43ab23ef9f3717fc1bc49325065 Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Thu, 14 Sep 2017 15:49:55 -0400 Subject: [PATCH 5/6] Update WDC Detail View template * Title now features location, which is extracted from the id * Source has service_org and service_title, with the description inside a popup * Instead of the calendar icon, we now use the text "Data collected on" or "Data collected between" based on if the end date is different from the beginning date * Sample mediums are listed * Source Data button is shown if details_url exists * Web Services button is shown pointing to the service url * Last collected value is shown in relative time, using a new toTimeAgo filter * A table of concept keywords is added - This currently only features the keyword name - Values and units will be pulled in the future, see #2238 * There is comment placeholder for adding charts, coming in #2238 * Citation in the bottom * Some style edits to make it all fit The popover() and bootstrapTable() functions will only execute if the template has any corresponding data-toggle elements. Thus, they noop for CINERGI and HydroShare. --- src/mmw/js/src/core/filters.js | 27 +++++++++ .../templates/resultDetailsCuahsi.html | 60 ++++++++++++++++--- src/mmw/js/src/data_catalog/views.js | 13 +++- src/mmw/sass/pages/_data-catalog.scss | 8 ++- 4 files changed, 97 insertions(+), 11 deletions(-) diff --git a/src/mmw/js/src/core/filters.js b/src/mmw/js/src/core/filters.js index fc7c9c516..2158a9d5d 100644 --- a/src/mmw/js/src/core/filters.js +++ b/src/mmw/js/src/core/filters.js @@ -60,6 +60,33 @@ nunjucks.env.addFilter('toDateWithoutTime', function(date) { fullDate.getUTCFullYear(); }); +nunjucks.env.addFilter('toTimeAgo', function(date) { + var diff = Date.now() - (new Date(date)).getTime(), + secs = diff / 1000, + mins = secs / 60, + hrs = mins / 60, + days = hrs / 24, + wks = days / 7, + mths = days / 30, + yrs = days / 365; + + if (yrs > 1) { + return Math.floor(yrs) + " years ago"; + } else if (mths > 1) { + return Math.floor(mths) + " months ago"; + } else if (wks > 1) { + return Math.floor(wks) + " weeks ago"; + } else if (days > 1) { + return Math.floor(days) + " days ago"; + } else if (hrs > 1) { + return Math.floor(hrs) + " hours ago"; + } else if (mins > 1) { + return Math.floor(mins) + " minutes ago"; + } else { + return Math.floor(secs) + " seconds ago"; + } +}); + nunjucks.env.addFilter('split', function(str, splitChar, indexToReturn) { var items = str.split(splitChar); diff --git a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html index f6b621400..9aa0170eb 100644 --- a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html +++ b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html @@ -1,14 +1,21 @@
-

- {{ title }} -

- Zoom to extent +

+ Site: {{ location }} {{ title }} +

+

+ Source: {{ service_org }} {{ service_title }} + + + +

-
{% if author %}

{{ author }} @@ -16,14 +23,51 @@

{% endif %} {% if begin_date == end_date %}

- {{ begin_date|toDateWithoutTime }} + Data collected on: {{ begin_date|toDateWithoutTime }}

{% else %}

- {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }} + Data collected between: {{ begin_date|toDateWithoutTime }} - {{ end_date|toDateWithoutTime }}

{% endif %}

- {{ description }} + Medium: {{ sample_mediums|join(", ") }} +

+

+ {% if details_url %} + +  Source Data + + {% endif %} + +  Web Services + +

+
+

+ Last collected value {{ end_date|toTimeAgo }}:

+ + + + + + + + + + {% for ck in concept_keywords %} + + + + + + {% endfor %} + +
VariableValueUnits
{{ ck }}
+ +
+

Citation: {{ service_citation }}

diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js index 31d90268f..fa6ae6d71 100644 --- a/src/mmw/js/src/data_catalog/views.js +++ b/src/mmw/js/src/data_catalog/views.js @@ -467,9 +467,20 @@ var ResultDetailsView = Marionette.ItemView.extend({ this.catalog = options.catalog; }, + onAttach: function() { + this.$('[data-toggle="popover"]').popover({ + placement: 'right', + trigger: 'focus', + }); + this.$('[data-toggle="table"]').bootstrapTable(); + }, + templateHelpers: function() { + var id = this.model.get('id'), + location = id.substring(id.indexOf(':') + 1); + return { - catalog: this.catalog + location: location, }; }, diff --git a/src/mmw/sass/pages/_data-catalog.scss b/src/mmw/sass/pages/_data-catalog.scss index ba6ec416e..23aa344a8 100644 --- a/src/mmw/sass/pages/_data-catalog.scss +++ b/src/mmw/sass/pages/_data-catalog.scss @@ -22,10 +22,14 @@ top: 0px; width: 100%; position: absolute; - z-index: 10000; + z-index: 1000; background-color: #fff; overflow: auto; + p { + margin: 5px 0 0 0; + } + .result-detail-header { h2 { display: inline-block; @@ -33,7 +37,7 @@ max-width: 95%; } - a { + a.zoom { display: block; } } From 86e33cb3d959ae4a05622e3e905dbb706f12bc7a Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Fri, 15 Sep 2017 10:44:02 -0400 Subject: [PATCH 6/6] Make popover text selectable Previously, with 'focus', the popover would disappear after a click. With 'click', it stays around until explicitly closed, either by the close button within the popover, or by re-clicking the info icon that opened it. This allows the user to select text in the popover, and in the case of URLs, paste them into new tabs to visit the relevant sites. --- src/mmw/js/src/app.js | 5 +++++ .../js/src/data_catalog/templates/resultDetailsCuahsi.html | 2 +- src/mmw/js/src/data_catalog/views.js | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/mmw/js/src/app.js b/src/mmw/js/src/app.js index 05df828b4..d3c20da76 100644 --- a/src/mmw/js/src/app.js +++ b/src/mmw/js/src/app.js @@ -64,6 +64,11 @@ var App = new Marionette.Application({ // Enable screenshot functionality initializeShutterbug(); + + // Enabling hiding popovers from within them + window.closePopover = function() { + $('[data-toggle="popover"]').popover('hide'); + }; }, load: function(data) { diff --git a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html index 9aa0170eb..baa09da4f 100644 --- a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html +++ b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html @@ -11,7 +11,7 @@

+ data-template="
">

diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js index fa6ae6d71..c3f84191c 100644 --- a/src/mmw/js/src/data_catalog/views.js +++ b/src/mmw/js/src/data_catalog/views.js @@ -470,7 +470,7 @@ var ResultDetailsView = Marionette.ItemView.extend({ onAttach: function() { this.$('[data-toggle="popover"]').popover({ placement: 'right', - trigger: 'focus', + trigger: 'click', }); this.$('[data-toggle="table"]').bootstrapTable(); },