From 3727f5da48d54d39f686ff8958c5ae210d61d5ed Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Wed, 21 Feb 2024 07:17:28 +0200
Subject: [PATCH] Improve inspect hover UI (#879)

Fixes #868
- #868

It solves all the block within blocks and all kind of controls that are
not required which creates gaps.
I use a simple table, so the width is dynamic but it is always aligned
for all the properties and the features.

![image](https://github.com/maplibre/maputnik/assets/3269297/75138b00-ec7b-4e8d-b51b-f8ff6abcd5cb)

Vary basic stuff.
There's still the layer popup, which I'm not sure I know what it is and
might need to be fixed as well.
CC: @zstadler
---
 .../MapMaplibreGlFeaturePropertyPopup.tsx     | 43 ++++++++-----------
 src/styles/_popup.scss                        |  9 ++++
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
index c2337475..e1d0a28e 100644
--- a/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
+++ b/src/components/MapMaplibreGlFeaturePropertyPopup.tsx
@@ -1,6 +1,4 @@
 import React from 'react'
-import Block from './Block'
-import FieldString from './FieldString'
 
 export type InspectFeature = {
   id: string
@@ -21,30 +19,25 @@ function displayValue(value: string | number | Date | object) {
   return value;
 }
 
-function renderProperties(feature: InspectFeature) {
-  return Object.keys(feature.properties).map(propertyName => {
-    const property = feature.properties[propertyName]
-    return <Block key={propertyName} label={propertyName}>
-      <FieldString value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
-    </Block>
-  })
-}
-
-function renderFeatureId(feature: InspectFeature) {
-  return <Block key={"feature-id"} label={"feature_id"}>
-    <FieldString value={displayValue(feature.id)} style={{backgroundColor: 'transparent'}} />
-  </Block>
+function renderKeyValueTableRow(key: string, value: string) {
+  return <tr key={key}>
+    <td className="maputnik-popup-table-cell">{key}</td>
+    <td className="maputnik-popup-table-cell">{value}</td>
+  </tr>
 }
 
 function renderFeature(feature: InspectFeature, idx: number) {
-  return <div key={`${feature.sourceLayer}-${idx}`}>
-    <div className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
-    <Block key={"property-type"} label={"$type"}>
-      <FieldString value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
-    </Block>
-    {renderFeatureId(feature)}
-    {renderProperties(feature)}
-  </div>
+  return <>
+    <tr key={`${feature.sourceLayer}-${idx}`}>
+      <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
+    </tr>
+    {renderKeyValueTableRow("$type", feature.geometry.type)}
+    {renderKeyValueTableRow("Feature ID", displayValue(feature.id))}
+    {Object.keys(feature.properties).map(propertyName => {
+      const property = feature.properties[propertyName];
+      return renderKeyValueTableRow(propertyName, displayValue(property))
+    })}
+  </>
 }
 
 function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -78,7 +71,9 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
     const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">
-      {features.map(renderFeature)}
+      <table className="maputnik-popup-table">
+        {features.map(renderFeature)}
+      </table>
     </div>
   }
 }
diff --git a/src/styles/_popup.scss b/src/styles/_popup.scss
index f9aab490..a500efb5 100644
--- a/src/styles/_popup.scss
+++ b/src/styles/_popup.scss
@@ -36,3 +36,12 @@
     margin-top: $margin-2;
   }
 }
+
+.maputnik-popup-table {
+  width: 100%;
+}
+
+.maputnik-popup-table-cell {
+  color: $color-lowgray;
+  padding-left: $margin-2;
+}