<p>OK, so this has been brewing for over 2 years (!) now... so I thought I'd make a pull request and get some sanity/reality checks on this code and features themselves.</p>
<p>In this branch you will find what I named a "activity tab". This has been briefly demo'ed to people last year (or was it 2013...?), hopefully OWL API will be back soon so it can all come together again.</p>
<p>Currently this new tab displays many different things:</p>
<ol class="task-list">
<li><p><strong>List of changesets</strong> - this is done in a completely different way than with the history tab and the list always shows changesets which actually have any changes in the current view.</p></li>
<li><p><strong>List of changes</strong> - there is no such thing as "change" in OSM API but in OWL this is a basic unit of information. A change is more or less synonymous with node/way version but in addition to object versions, changes also capture more subtle alterations like moving one node of a way - this is only recorded in the OSM API as a node version but in OWL you will see the actual change caused by moving the node.</p></li>
<li><p><strong>Details of changes</strong> - it shows what exactly has changed (which tags, previous geometry) and also uses icons from the map key to visually identify change - so if you add/remove/move/whatever a coffee shop then you will get a proper icon in the activity tab.</p></li>
<li><p><strong>Geometry of changes</strong> - OWL API provides vector tiles which are rendered using Leaflet GeoJSON tile layer. The user can interact with the geometry - if you click something which is highlighted on the map, you will get more information about it in the sidebar - basically the sidebar will scroll through to the position so that it shows the details of a change that you clicked on the map.</p></li>
</ol>
<p>You can see an example of all this on the screenshot below.<br>
<a href="https://cloud.githubusercontent.com/assets/469990/5807677/ddbce6a0-a025-11e4-9c1c-6e6651985b20.png" target="_blank"><img src="https://cloud.githubusercontent.com/assets/469990/5807677/ddbce6a0-a025-11e4-9c1c-6e6651985b20.png" alt="owl" style="max-width:100%;"></a></p>
<p>It's not pretty, I know. It's also not very intuitive to use. It's more of a showcase for the capabilities of the OWL API - to show what information the API provides. There are many ideas how to better use the API, I've also had some feature requests (for example, <a href="https://github.com/ppawel/openstreetmap-website/issues/26" class="issue-link" title="Feature requests for OWL">ppawel/openstreetmap-website#26</a>), I think some of them definitely make sense - like inspecting a single changeset. That would probably need to be a separate "mode" from the activity tab.</p>
<p>Anyway, if anything, it would be good to accomplish two things with this pull request:</p>
<ol class="task-list">
<li><p>Get your feedback / suggestions on the <strong>usability, design, features</strong> and all that. I have many more ideas where to take this - I'd love to integrate the changeset commenting feature - this would give us a lovely social network-style interactive activity stream. But on the other hand, it all needs some UX love, otherwise it will probably end up as some kind of monster crammed with every feature under the sun.</p></li>
<li><p>Get this stuff <strong>code reviewed</strong> or at least get some of my assumptions validated. I mean things like new dependencies introduced - client-side templates (EJS), jQuery timeago plugin. Note that the code is pretty much WIP but of course all suggestions are welcome.</p></li>
</ol>
<p>Looking forward to your comments.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/876'>https://github.com/openstreetmap/openstreetmap-website/pull/876</a></p>
<h4>Commit Summary</h4>
<ul>
<li>Started work on OWL integration.</li>
<li>More work on the history tab. Now uses tilerange API.</li>
<li>Use openstreetmap.org instead of osm.org.</li>
<li>Just some UI tweaks.</li>
<li>Implemented simple paging.</li>
<li>Sorting changesets.</li>
<li>Highlighting changesets.</li>
<li>Layout tweaks, displaying comments.</li>
<li>CSS tweaks, handle empty comments better.</li>
<li>Fixed JS error when highlighting changesets.</li>
<li>Properly manage changeset bboxes (there can be more than one now).</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Merge branch 'master' into owl-history-tab</li>
<li>Compatibility with the new OWL API.</li>
<li>Work on the history sidebar UI.</li>
<li>Work on the history sidebar UI.</li>
<li>Merge branch 'owl-history-tab' of github.com:ppawel/openstreetmap-website into owl-history-tab</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Showing change details.</li>
<li>Refactored the OWL-related JS code to make it more readable and maintainable.</li>
<li>Extracted styles and misc stuff to config.js.</li>
<li>Cleanup, improved change popup.</li>
<li>Updated the OWL API URL to include API version.</li>
<li>Work on the change popup UI.</li>
<li>Align the timestamp.</li>
<li>Highlighting the history tab when selected.</li>
<li>Translated history sidebar title.</li>
<li>Cleanup.</li>
<li>Tweaked displaying icons.</li>
<li>Added "beta".</li>
<li>Support zoom levels lower than 16 properly.</li>
<li>Loading indicator.</li>
<li>Don't refresh when it's not needed.</li>
<li>Added sidebar footer.</li>
<li>Updating the RSS link.</li>
<li>Fixes to the footer.</li>
<li>Fixed "next page".</li>
<li>Small CSS tweaks.</li>
<li>Small adjustments.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Ignore response that is not applicable to the current viewport.</li>
<li>Added username to the popup.</li>
<li>Some tweaks.</li>
<li>Organized JS templates better; proper close sidebar handling.</li>
<li>Added jQuery timeago plugin for nicer dates.</li>
<li>Tweaks to geometry styling, now it can be done per action.</li>
<li>Showing previous geometry in the UI.</li>
<li>More info in the popup.</li>
<li>Display only the latest version of every element.</li>
<li>Removed debug logging.</li>
<li>Do a second pass when adding changes to properly order them.</li>
<li>Style for "affected" ways.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Adjusted popup UI.</li>
<li>#2 Fix links to objects</li>
<li>Styling tweaks.</li>
<li>Closes #2 Fixed links to ways/nodes</li>
<li>Display latest changes above older ones.</li>
<li>Adjusted colors.</li>
<li>Added link to report issues.</li>
<li>Don't forget affected ways.</li>
<li>Added onChangeClicked event and refactored related code so it's easier to change the UI.</li>
<li>#5 Removed change popup, now change details are displayed on the sidebar.</li>
<li>#5 More work on sidebar.</li>
<li>#5 More compact sidebar layout.</li>
<li>Fixed a bug where tags from affected ways were shown as new tags.</li>
<li>Hide tag table when unhighlighting change.</li>
<li>Slight styling change.</li>
<li>Fixed clicking on changeset in the list, extracted some utility functions to a separate file.</li>
<li>Added minZoomLevel.</li>
<li>Clicking on changes now shows change tags.</li>
<li>Added user friendly descriptions of changes.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>#13 Icons in the summary are no longer links - confusing for navigation!</li>
<li>Forced - Firefox is not able to overflow spans without it (Chromium is fine).</li>
<li>Enable changeset highlighting again.</li>
<li>#15 Changeset/item and geometry highlighting in both directions</li>
<li>Implemented highlighting the other way. Closes #15.</li>
<li>#15 Fixed a couple of highlighting bugs.</li>
<li>#15 Fixed even more interaction bugs.</li>
<li>Small style changes.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Use a "More results" button instead of a >> link. Closes #9.</li>
<li>Display tags as a list, not a table with background color on rows. Hopefully this is more readable.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Display element id, not change id.</li>
<li>#3 Better handling of tag symbols.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Added tag symbol class for building=yes according to required convention.</li>
<li>#10 Avoid having 10 lines of building icons as changeset description.</li>
<li>#10 Take prev_tags into account when generating tag symbols.</li>
<li>Fixed JS error.</li>
<li>Simplified some code.</li>
<li>Fixed "show previous geometry" feature when prev_geom was null.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Removed minzoom for the History tab - hate this modal alert box! Also, the sidebar informs the user that they have to zoom in.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Render changes only after they are shown.</li>
<li>#9 Implemented infinite scroll for the changeset list.</li>
<li>More tag symbols (because I like them).</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>There's no geom_changed anymore.</li>
<li>Typo.</li>
<li>Fixed a bug in displaying geom/prev_geom.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Display user avatars to make the changeset list more "social".</li>
<li>Merge branch 'owl-history-tab' into vector-tiles</li>
<li>Icons for actions.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>There's no geom_changed anymore.</li>
<li>New feature styling mechanism that handles (multi)polygons better.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Added status information to the page.</li>
<li>Merge branch 'vector-tiles' into owl-history-tab</li>
<li>Fixed a bug with highlighting features, adjusted colors.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Updated status.</li>
<li>Properly display deleted geometry.</li>
<li>Some users returned by the API don't have the avatar link for some reason...</li>
<li>Display only the latest change for each element.</li>
<li>Disabled the link to changeset to make interaction more intuitive.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab</li>
<li>Added jquery scrollIntoView plugin again.</li>
<li>Fixed a regression with symbols not showing up (CSS class names have changed).</li>
<li>Fixed symbols in Firefox (::before is :before there).</li>
<li>Fixed loading more changesets, displaying symbols.</li>
<li>Tweaks to the changeset list UX (still sucks, but small steps, right?).</li>
<li>Moved RSS icon to the sidebar header. Closes #20.</li>
<li>Open links to objects in new window.</li>
<li>Updates for the new API.</li>
<li>More work with new API.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab-new</li>
<li>More changes for new API.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab-new</li>
<li>Updates for new API.</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab-new</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab-new</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab-new</li>
<li>Merge branch 'master' of git://github.com/openstreetmap/openstreetmap-website into owl-history-tab-new</li>
<li>Merge remote-tracking branch 'origin/master' into owl-history-tab-new</li>
<li>Added temporary workaround for performance problems in the OWL layer.</li>
</ul>
<h4>File Changes</h4>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-0">Gemfile</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-1">Gemfile.lock</a>
(2)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-2">app/assets/images/info.png</a>
(0)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-3">app/assets/images/undo.png</a>
(0)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-4">app/assets/javascripts/application.js</a>
(10)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-5">app/assets/javascripts/index.js</a>
(27)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-6">app/assets/javascripts/index/owl.js</a>
(232)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-7">app/assets/javascripts/osm.js.erb</a>
(3)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-8">app/assets/javascripts/owl/TileLayer.GeoJSON.js</a>
(257)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-9">app/assets/javascripts/owl/config.js</a>
(71)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-10">app/assets/javascripts/owl/layer.js</a>
(319)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-11">app/assets/javascripts/owl/owl.js.erb</a>
(222)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-12">app/assets/javascripts/owl/utils.js</a>
(166)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-13">app/assets/javascripts/templates/owl/changes.jst.ejs</a>
(35)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-14">app/assets/javascripts/templates/owl/changeset_list.jst.ejs</a>
(40)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-15">app/assets/javascripts/templates/owl/sidebar_layout.jst.ejs</a>
(11)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-16">app/assets/stylesheets/common.css.scss</a>
(185)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-17">app/controllers/activity_controller.rb</a>
(8)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-18">app/views/activity/display.html.erb</a>
(13)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-19">app/views/browse/activity.html.erb</a>
(14)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-20">app/views/layouts/_header.html.erb</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-21">app/views/site/index.html.erb</a>
(7)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-22">config/example.application.yml</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-23">config/i18n-js.yml</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-24">config/locales/en.yml</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-25">config/routes.rb</a>
(1)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-26">vendor/assets/jquery/jquery.scrollIntoView.js</a>
(137)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/876/files#diff-27">vendor/assets/jquery/jquery.timeago.js</a>
(153)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/876.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/876.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/876.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/876.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br>Reply to this email directly or <a href="https://github.com/openstreetmap/openstreetmap-website/pull/876">view it on GitHub</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLRctMwg19pS3WOZX0qs7SvpvsaNtks5njWqtgaJpZM4DUWY6.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
<link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/876"></link>
<meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>