add section "tags added / updated / deleted"

CHANGELOG.md

@@ -0,0 +1,8 @@
+### Change Log
+
+Log of changes since the 1.1.0 version
+
+# 1.2.0
+
+* Link the id of the old version changeset to OSMCha
+* Add section 'Tags added, updated, deleted'

lib/sidebar.js

@@ -1,19 +1,133 @@
 import React from 'react';
 import moment from 'moment';
 import { getBounds } from './helpers';
+import { cmap } from './render';
+
+export function getFeatures(features) {
+  var keys = Object.keys(features);
+  return keys.map(item => features[item]);
+}
+
+export function processFeatures(features) {
+  const finalReport = new Map();
+  const analyzedFeatures = features.map(feature =>
+    analyzeFeature(feature[0], feature[1])
+  );
+  const keys = ['addedTags', 'changedValues', 'deletedTags'];
+  analyzedFeatures.map(item =>
+    keys.map(key =>
+      item.get(key).forEach(tag => {
+        if (finalReport.get(tag)) {
+          finalReport.set(tag, finalReport.get(tag).concat([item.get('id')]));
+        } else {
+          finalReport.set(tag, [item.get('id')]);
+        }
+      })
+    )
+  );
+  return finalReport;
+}
+
+export function analyzeFeature(newVersion, oldVersion) {
+  var oldVersionKeys = Object.keys(oldVersion.properties.tags);
+  var newVersionKeys = Object.keys(newVersion.properties.tags);
+  var addedTags = newVersionKeys.filter(
+    tag => oldVersionKeys.indexOf(tag) === -1
+  );
+  var deletedTags = oldVersionKeys.filter(
+    tag => newVersionKeys.indexOf(tag) === -1
+  );
+  var changedValues = newVersionKeys
+    .filter(
+      tag => addedTags.indexOf(tag) === -1 && deletedTags.indexOf(tag) === -1
+    )
+    .filter(
+      tag => newVersion.properties.tags[tag] !== oldVersion.properties.tags[tag]
+    );
+  var result = new Map();
+  result
+    .set('id', newVersion.properties.id)
+    .set('addedTags', addedTags.map(tag => `Added tag ${tag}`))
+    .set('deletedTags', deletedTags.map(tag => `Deleted tag ${tag}`))
+    .set(
+      'changedValues',
+      changedValues.map(tag => `Changed value of tag ${tag}`)
+    );
+  return result;
+}
+
+export function selectFeature(id: number) {
+  if (!id || !cmap) return;
+  cmap.emit('selectFeature', 'node|way', id);
+}
+
+function FeatureListItem(props) {
+  return (
+    <li>
+      <span className="cmap-pointer " onClick={() => selectFeature(props.id)}>
+        {props.id}
+      </span>
+    </li>
+  );
+}
+
+export class ChangeItem extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      opened: false
+    };
+    this.tag = props.change[0];
+    this.value = props.change[1];
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange() {
+    this.setState({ opened: !this.state.opened });
+  }
+  render() {
+    return (
+      <div>
+        <h7
+          className="cmap-sub-heading cmap-pointer"
+          onClick={this.handleChange}
+        >
+          {this.state.opened ? '▼' : '▶'}
+          {this.tag}
+        </h7>
+        <ul
+          className="cmap-vlist"
+          style={{
+            display: this.state.opened ? 'block' : 'none'
+          }}
+        >
+          {this.value.map((id, k) => <FeatureListItem id={id} key={k} />)}
+        </ul>
+      </div>
+    );
+  }
+}
 
 export class Sidebar extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       actions: true,
       type: false,
+      changes: false,
       mapStyle: false,
       user: false
     };
+    this.changeReport = [];
+    this.changedFeatures = processFeatures(
+      getFeatures(this.props.result.featureMap).filter(
+        item => item.length === 2 && item[0].properties.action === 'modify'
+      )
+    ).forEach((featureIDs, tag) => this.changeReport.push([tag, featureIDs]));
+
     this.toggleUser = this.toggleUser.bind(this);
     this.toggleActions = this.toggleActions.bind(this);
     this.toggleType = this.toggleType.bind(this);
+    this.toggleChanges = this.toggleChanges.bind(this);
     this.toggleMapStyle = this.toggleMapStyle.bind(this);
   }
   toggleUser() {
@@ -31,6 +145,11 @@ export class Sidebar extends React.PureComponent {
       type: !this.state.type
     });
   }
+  toggleChanges() {
+    this.setState({
+      changes: !this.state.changes
+    });
+  }
   toggleMapStyle() {
     this.setState({
       mapStyle: !this.state.mapStyle
@@ -95,7 +214,7 @@ export class Sidebar extends React.PureComponent {
                 className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osmhv"
                 href={
                   'http://osmhv.openstreetmap.de/changeset.jsp?id=' +
-                  changesetId
+                    changesetId
                 }
               >
                 OSM HV
@@ -107,8 +226,8 @@ export class Sidebar extends React.PureComponent {
                 className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-josm"
                 href={
                   'http://127.0.0.1:8111/import?url=http://www.openstreetmap.org/api/0.6/changeset/' +
-                  changesetId +
-                  '/download'
+                    changesetId +
+                    '/download'
                 }
               >
                 JOSM
@@ -120,9 +239,9 @@ export class Sidebar extends React.PureComponent {
                 className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-id"
                 href={
                   'http://preview.ideditor.com/release#map=15/' +
-                  center.lat +
-                  '/' +
-                  center.lng
+                    center.lat +
+                    '/' +
+                    center.lng
                 }
               >
                 iD
@@ -166,7 +285,7 @@ export class Sidebar extends React.PureComponent {
                 className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-disc"
                 href={
                   'http://resultmaps.neis-one.org/osm-discussion-comments?uid=' +
-                  userId
+                    userId
                 }
               >
                 Discussions
@@ -178,8 +297,8 @@ export class Sidebar extends React.PureComponent {
                 className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-comm"
                 href={
                   'http://resultmaps.neis-one.org/osm-discussion-comments?uid=115894' +
-                  userId +
-                  '&commented'
+                    userId +
+                    '&commented'
                 }
               >
                 Comments
@@ -258,7 +377,7 @@ export class Sidebar extends React.PureComponent {
                   value="nodes"
                   defaultChecked="true"
                   id="cmap-type-selector-nodes"
-                  onChange={filterLayers}
+                  onClick={filterLayers}
                 />
                 <span className="cmap-label-text">Nodes</span>
               </label>
@@ -289,6 +408,19 @@ export class Sidebar extends React.PureComponent {
             </li>
           </ul>
         </section>
+        <section className="cmap-filter-changes-section cmap-pb3">
+          <h6 className="cmap-heading pointer" onClick={this.toggleChanges}>
+            {this.state.changes ? '▼' : '▶'}Tags added / updated / deleted
+          </h6>
+          <ul
+            className="cmap-sub-hlist"
+            style={{ display: this.state.changes ? 'block' : 'none' }}
+          >
+            {this.changeReport
+              .sort()
+              .map((change, k) => <ChangeItem key={k} change={change} />)}
+          </ul>
+        </section>
         <section className="cmap-map-style-section cmap-pb3">
           <h6 className="cmap-heading pointer" onClick={this.toggleMapStyle}>
             {this.state.mapStyle ? '▼' : '▶'}Map style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "changeset-map",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "dist/bundle.js",
   "scripts": {

public/css/style.css

@@ -47,11 +47,34 @@
   color: #666;
 }
 
+.cmap-sidebar section .cmap-sub-heading {
+  font-size: 0.9em;
+  margin: 3px 0;
+  color: #666;
+}
+
 .cmap-sidebar em {
   font-style: italic;
   text-transform: none;
 }
 
+/* Vertical list
+------------------------------------------------------- */
+
+.cmap-vlist li {
+  display: block;
+}
+.cmap-vlist li:hover {
+  font-weight: bold;
+}
+
+.cmap-sub-heading {
+  padding-left: 0.8em;
+}
+.cmap-vlist {
+  padding-left: 1.6em !important;
+}
+
 /* Horizontal list
 ------------------------------------------------------- */