Expand sidebar when selecting notes and data

modules/geo/extent.js

@@ -20,7 +20,6 @@ export function geoExtent(min, max) {
     }
 }
 
-// $FlowFixMe
 geoExtent.prototype = new Array(2);
 
 _extend(geoExtent.prototype, {

modules/modes/select_data.js

@@ -1,3 +1,6 @@
+
+import { geoBounds as d3_geoBounds } from 'd3-geo';
+
 import {
     event as d3_event,
     select as d3_select
@@ -12,11 +15,8 @@ import {
     behaviorSelect
 } from '../behavior';
 
-import {
-    modeDragNode,
-    modeDragNote
-} from '../modes';
-
+import { geoExtent } from '../geo';
+import { modeDragNode, modeDragNote } from '../modes';
 import { modeBrowse } from './browse';
 import { uiDataEditor } from '../ui';
 
@@ -69,8 +69,12 @@ export function modeSelectData(context, selectedDatum) {
 
         selectData();
 
-        context.ui().sidebar
-            .show(dataEditor.datum(selectedDatum));
+        var sidebar = context.ui().sidebar;
+        sidebar.show(dataEditor.datum(selectedDatum));
+
+        // expand the sidebar, avoid obscuring the data if needed
+        var extent = geoExtent(d3_geoBounds(selectedDatum));
+        sidebar.expand(sidebar.intersects(extent));
 
         context.map()
             .on('drawn.select-data', selectData);

modules/modes/select_note.js

@@ -105,8 +105,11 @@ export function modeSelectNote(context, selectedNoteID) {
 
         selectNote();
 
-        context.ui().sidebar
-            .show(noteEditor.note(note));
+        var sidebar = context.ui().sidebar;
+        sidebar.show(noteEditor.note(note));
+
+        // expand the sidebar, avoid obscuring the note if needed
+        sidebar.expand(sidebar.intersects(note.extent()));
 
         context.map()
             .on('drawn.select', selectNote);