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

Pass originalLat & originalLng to clusterMarker onClick #785

Merged
merged 7 commits into from
Jan 17, 2017
Merged

Pass originalLat & originalLng to clusterMarker onClick #785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7de41d8
Remove console log
Jan 13, 2017
90ee2aa
Remove items from compatibility-pending list
Jan 16, 2017
0bdff8f
Pass originalLat & originalLng to clusterMarker onClick
Jan 16, 2017
024a65c
Use SVG circle instead of path for bubble cluster marker
Jan 16, 2017
ff27027
Workaround Chrome SVG-cropping glitch
Jan 16, 2017
1ddf5c8
Re-align bubble and text centres
Jan 16, 2017
599bb80
Workaround Chrome SVG-cropping glitch
Jan 16, 2017
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
5 changes: 0 additions & 5 deletions webapp/QAFs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,6 @@ Compatibility
- [x] Mozilla Firefox v25 (latest v49)

###Compatible-pending client web browsers (minimum versions):
- desktop and laptop
- Microsoft Windows 8.1, 10
- [ ] Microsoft Internet Explorer v11 (released 2013-10-17) (known to fail, `'Uint8ClampedArray' is undefined`)
- Microsoft Windows 7, 8
- [ ] Microsoft Internet Explorer v10 (released 2012-10-26) (known to fail, `'Uint8ClampedArray' is undefined`)
- tablet and mobile
- Apple iOS v10
- [ ] Google Chrome v29 (latest v54) (preliminary tests suggest OK)
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/js/components/Chart/Pie/Widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ let PieChart = React.createClass({
// }

return (
<svg style={{overflow: 'visible'}} width="1" height="1">
<svg style={{overflow: 'visible'}} width={radius} height={radius}>
<g transform={'rotate(90)'}>
{sectors}
</g>
Expand Down
48 changes: 26 additions & 22 deletions webapp/src/js/components/Map/TableMarkersLayer/Widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,13 @@ let TableMarkersLayer = React.createClass({
this.getFlux().actions.panoptes.dataItemPopup({table, primKey, switchTo: !middleClick});
},
handleClickClusterMarker(e, payload) {
let {table, lat, lng, latProperty, lngProperty} = payload;
let {table, originalLat, originalLng, latProperty, lngProperty} = payload;
const middleClick = e.originalEvent.button == 1 || e.originalEvent.metaKey || e.originalEvent.ctrlKey;
if (!middleClick) {
e.originalEvent.stopPropagation();
}
let switchTo = !middleClick;
console.log('handleClickClusterMarker payload %o', payload);

if (this.config.tablesById[table].listView) {
this.getFlux().actions.session.popupOpen(<ListWithActions table={table} />, switchTo);
} else {
Expand All @@ -109,8 +109,8 @@ console.log('handleClickClusterMarker payload %o', payload);
if (showableColumns instanceof Array && showableColumns.length > 0) {

let whereClause = SQL.WhereClause.AND([
SQL.WhereClause.CompareFixed(latProperty, '=', lat),
SQL.WhereClause.CompareFixed(lngProperty, '=', lng)
SQL.WhereClause.CompareFixed(latProperty, '=', originalLat),
SQL.WhereClause.CompareFixed(lngProperty, '=', originalLng)
]);
whereClause.isRoot = true;
let query = SQL.WhereClause.encode(whereClause);
Expand Down Expand Up @@ -257,7 +257,9 @@ console.log('handleClickClusterMarker payload %o', payload);
valueAsColour,
value,
latProperty: locationTableConfig.latitude,
lngProperty: locationTableConfig.longitude
lngProperty: locationTableConfig.longitude,
originalLat: lat,
originalLng: lng
};

markers.push({lat, lng}); // markers[] is only used for CalcMapBounds.calcMapBounds(markers)
Expand Down Expand Up @@ -420,7 +422,9 @@ console.log('handleClickClusterMarker payload %o', payload);
primKey: markersGroupedByLocation[location][0].primKey,
colourScaleFunction: scaleColour([minValue, maxValue]),
latProperty: markersGroupedByLocation[location][0].latProperty,
lngProperty: markersGroupedByLocation[location][0].lngProperty
lngProperty: markersGroupedByLocation[location][0].lngProperty,
originalLat: markersGroupedByLocation[location][0].originalLat,
originalLng: markersGroupedByLocation[location][0].originalLng
});

} else {
Expand Down Expand Up @@ -456,7 +460,9 @@ console.log('handleClickClusterMarker payload %o', payload);
table,
primKey: markersGroupedByLocation[location][0].primKey,
latProperty: markersGroupedByLocation[location][0].latProperty,
lngProperty: markersGroupedByLocation[location][0].lngProperty
lngProperty: markersGroupedByLocation[location][0].lngProperty,
originalLat: markersGroupedByLocation[location][0].originalLat,
originalLng: markersGroupedByLocation[location][0].originalLng
});

}
Expand All @@ -476,7 +482,9 @@ console.log('handleClickClusterMarker payload %o', payload);
count: markersGroupedByLocation[location].length,
title: markersGroupedByLocation[location].length + ' ' + this.config.tablesById[table].namePlural + '\n' + markersGroupedByLocation[location].map((obj) => obj.title).join(', '),
latProperty: markersGroupedByLocation[location][0].latProperty,
lngProperty: markersGroupedByLocation[location][0].lngProperty
lngProperty: markersGroupedByLocation[location][0].lngProperty,
originalLat: markersGroupedByLocation[location][0].originalLat,
originalLng: markersGroupedByLocation[location][0].originalLng
});

} else {
Expand Down Expand Up @@ -525,19 +533,15 @@ console.log('handleClickClusterMarker payload %o', payload);
renderNodes.map(
(marker, i) => {

// NB: Code copied from PieChart and PieChartSector widgets
let bubbleRadius = marker.radius > MINIMUM_BUBBLE_RADIUS ? marker.radius : MINIMUM_BUBBLE_RADIUS;
let pie = d3.layout.pie().sort(null);
let arcDescriptors = pie([1]);
let arc = d3.svg.arc().outerRadius(bubbleRadius).innerRadius(0);

// Default to using a bubble (or "balloon"?) cluster marker.valueAsColour
// Default to using a bubble cluster marker.valueAsColour
let clusterComponent = (
<svg style={{overflow: 'visible'}} width="1" height="1">
<svg style={{overflow: 'visible'}} width={bubbleRadius} height={bubbleRadius}>
<g className="panoptes-cluster-bubble" style={{fill: marker.valueAsColour}}>
<title>{marker.title}</title>
<path d={arc(arcDescriptors[0])}></path>
<text x="50%" y="50%" textAnchor="middle" alignmentBaseline="middle" fontSize="10">{marker.count}</text>
<circle cx="0" cy="0" r={bubbleRadius} />
<text x="0" y="0" textAnchor="middle" alignmentBaseline="middle" fontSize="10">{marker.count}</text>
</g>
</svg>
);
Expand All @@ -551,8 +555,8 @@ console.log('handleClickClusterMarker payload %o', payload);
hideValues={true}
lat={marker.lat}
lng={marker.lng}
originalLat={marker.lat}
originalLng={marker.lng}
originalLat={marker.originalLat}
originalLng={marker.originalLng}
radius={marker.radius}
/>
);
Expand All @@ -569,8 +573,8 @@ console.log('handleClickClusterMarker payload %o', payload);
radius={marker.radius}
lat={marker.lat}
lng={marker.lng}
originalLat={marker.lat}
originalLng={marker.lng}
originalLat={marker.originalLat}
originalLng={marker.originalLng}
unitNameSingle={this.config.tablesById[table].nameSingle}
unitNamePlural={this.config.tablesById[table].namePlural}
valueName={this.config.tablesById[table].propertiesById[markerColourProperty].name}
Expand All @@ -582,8 +586,8 @@ console.log('handleClickClusterMarker payload %o', payload);

let onClickPayload = {
table: marker.table,
lat: marker.lat,
lng: marker.lng,
originalLat: marker.originalLat,
originalLng: marker.originalLng,
latProperty: marker.latProperty,
lngProperty: marker.lngProperty
};
Expand Down