Improve inspect popups

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>
   }
 }