Improve inspect popups

src/components/AppLayout.jsx

@@ -3,6 +3,7 @@ import ScrollContainer from './ScrollContainer'
 
 import theme from '../config/theme'
 import colors from '../config/colors'
+import { fontSizes } from '../config/scales'
 
 class AppLayout extends React.Component {
   static propTypes = {
@@ -18,7 +19,7 @@ class AppLayout extends React.Component {
 
   getChildContext() {
     return {
-      reactIconBase: { size: 14 }
+      reactIconBase: { size: fontSizes[3] }
     }
   }
 

src/components/layers/LayerListItem.jsx

@@ -23,8 +23,8 @@ class LayerTypeDragHandle extends React.Component {
       {...this.props}
       style={{
         cursor: 'move',
-        width: 15,
-        height: 15,
+        width: fontSizes[4],
+        height: fontSizes[4],
         paddingRight: margins[0],
       }}
     />
@@ -115,7 +115,7 @@ class LayerListItem extends React.Component {
 
   getChildContext() {
     return {
-      reactIconBase: { size: 12 }
+      reactIconBase: { size: fontSizes[4] }
     }
   }
 

src/components/map/FeatureLayerTable.jsx

@@ -1,19 +1,12 @@
 import React from 'react'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import LayerIcon from '../icons/LayerIcon'
+import input from '../../config/input'
 
 import colors from '../../config/colors'
 import { margins, fontSizes } from '../../config/scales'
 
-function renderProperties(feature) {
-  return Object.keys(feature.properties).map(propertyName => {
-    const property = feature.properties[propertyName]
-    return <InputBlock label={propertyName} style={{marginTop: 0, marginBottom: 0}}>
-      <StringInput value={property} style={{backgroundColor: 'transparent'}}/>
-    </InputBlock>
-  })
-}
-
 const Panel = (props) => {
   return <div style={{
     backgroundColor: colors.gray,
@@ -25,23 +18,46 @@ const Panel = (props) => {
 
 function renderFeature(feature) {
   return <div>
-    <Panel>Source</Panel>
-      <InputBlock label={feature.layer['source-layer']} style={{marginTop: 0, marginBottom: 0}}>
-      </InputBlock>
-    <Panel>Layers</Panel>
-      <InputBlock label={feature.layer.id} style={{marginTop: 0, marginBottom: 0}}>
-      </InputBlock>
-    <Panel>Properties</Panel>
-    {renderProperties(feature)}
+    <Panel>{feature.layer['source-layer']}</Panel>
   </div>
 }
 
-class FeatureLayerTable extends React.Component {
+function groupFeaturesBySourceLayer(features) {
+  const sources = {}
+  features.forEach(feature => {
+    sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
+    sources[feature.layer['source-layer']].push(feature)
+  })
+  return sources
+}
 
+class FeatureLayerTable extends React.Component {
   render() {
-    const features = this.props.features
+    const sources = groupFeaturesBySourceLayer(this.props.features)
+
+    const items = Object.keys(sources).map(vectorLayerId => {
+      const layers = sources[vectorLayerId].map(feature => {
+        return <label style={{
+            ...input.label,
+            display: 'block',
+            width: 'auto',
+          }}>
+          <LayerIcon type={feature.layer.type} style={{
+            width: fontSizes[4],
+            height: fontSizes[4],
+            paddingRight: margins[0],
+          }}/>
+          {feature.layer.id}
+        </label>
+      })
+      return <div>
+        <Panel>{vectorLayerId}</Panel>
+        {layers}
+      </div>
+    })
+
     return <div>
-      {features.map(renderFeature)}
+      {items}
     </div>
   }
 }

src/components/map/FeaturePropertyPopup.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+
+function renderProperties(feature) {
+  return Object.keys(feature.properties).map(propertyName => {
+    const property = feature.properties[propertyName]
+    return <InputBlock label={propertyName} style={{marginTop: 0, marginBottom: 0}}>
+      <StringInput value={property} style={{backgroundColor: 'transparent'}}/>
+    </InputBlock>
+  })
+}
+
+const Panel = (props) => {
+  return <div style={{
+    backgroundColor: colors.gray,
+    padding: margins[0],
+    fontSize: fontSizes[5],
+    lineHeight: 1.2,
+  }}>{props.children}</div>
+}
+
+function renderFeature(feature) {
+  return <div>
+    <Panel>{feature.layer['source-layer']}</Panel>
+    {renderProperties(feature)}
+  </div>
+}
+
+class FeatureLayerTable extends React.Component {
+
+  render() {
+    const features = this.props.features
+    return <div>
+      {features.map(renderFeature)}
+    </div>
+  }
+}
+
+
+export default FeatureLayerTable

src/components/map/InspectionMap.jsx

@@ -4,9 +4,10 @@ import MapboxGl from 'mapbox-gl'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import colors from '../../config/colors'
 import style from '../../libs/style'
-import FeatureLayerTable from './FeatureLayerTable'
+import FeaturePropertyPopup from './FeaturePropertyPopup'
 import { generateColoredLayers } from '../../libs/stylegen'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import '../../mapboxgl.css'
 
 function convertInspectStyle(mapStyle, sources) {
   const newStyle = {
@@ -27,7 +28,7 @@ function convertInspectStyle(mapStyle, sources) {
 
 function renderPopup(features) {
   var mountNode = document.createElement('div');
-  ReactDOM.render(<FeatureLayerTable features={features} />, mountNode)
+  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
   return mountNode.innerHTML;
 }
 

src/components/map/MapboxGlMap.jsx

@@ -5,6 +5,7 @@ import FeatureLayerTable from './FeatureLayerTable'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import style from '../../libs/style.js'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import '../../mapboxgl.css'
 
 function renderPopup(features) {
   var mountNode = document.createElement('div');
@@ -74,7 +75,7 @@ export default class MapboxGlMap extends React.Component {
 			layers: this.layers
 		});
 
-    console.log('Click on features', features)
+    if(features.length < 1) return
 		const popup = new MapboxGl.Popup()
 			.setLngLat(e.lngLat)
 			.setHTML(renderPopup(features))

src/index.css

@@ -5,6 +5,10 @@
   font-style: normal;
 }
 
+html {
+  background-color: rgb(28, 31, 36);
+}
+
 .chrome-picker {
   background-color: #1c1f24 !important;
   font-family: inherit !important;
@@ -15,31 +19,3 @@
   color: rgb(142, 142, 142) !important;
   box-shadow: none !important;
 }
-
-.mapboxgl-popup-tip {
-  border-top-color: rgb(28, 31, 36) !important;
-}
-
-.mapboxgl-popup-content {
-  background-color: rgb(28, 31, 36) !important;
-  border-radius: 0px !important;
-  box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
-  padding: 0px !important;
-}
-
-.mapboxgl-popup-close-button {
-  color: white !important;
-}
-
-.mapboxgl-ctrl-group {
-  background: rgb(28, 31, 36) !important;
-}
-
-.mapboxgl-ctrl-group > button {
-  background-color: rgb(28, 31, 36) !important;
-  border-color: rgb(28, 31, 36) !important;
-
-  &:hover {
-    background-color: rgb(86, 83, 83);
-  }
-}

src/mapboxgl.css

@@ -0,0 +1,39 @@
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+ border-bottom-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+  border-right-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+  border-left-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+  border-top-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-content {
+  background-color: rgb(28, 31, 36);
+  border-radius: 0px;
+  box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 5px 0px;
+  padding: 0px;
+}
+
+.mapboxgl-popup-close-button {
+  color: white;
+}
+
+.mapboxgl-ctrl-group {
+  background: rgb(28, 31, 36);
+}
+
+.mapboxgl-ctrl-group > button {
+  background-color: rgb(28, 31, 36);
+  border-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-ctrl-group > button:hover {
+  background-color: rgb(86, 83, 83);
+}