Simplify code

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
         "@maplibre/maplibre-gl-geocoder": "^1.5.0",
-        "@maplibre/maplibre-gl-inspect": "^1.6.1",
+        "@maplibre/maplibre-gl-inspect": "^1.6.3",
         "@maplibre/maplibre-gl-style-spec": "^20.1.0",
         "@mdi/js": "^6.6.96",
         "@mdi/react": "^1.5.0",
@@ -2592,9 +2592,9 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-inspect": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.6.1.tgz",
-      "integrity": "sha512-PDzeNTIAXqsHDiBk8pmwUfTMvk+QRmaNfpC32o9Or6fS/2UwOXlT03dGzILUTJUonOfwiVYcZxgsYCZq9LRcKw==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.6.3.tgz",
+      "integrity": "sha512-lJqLyTyrkhKF5+4bkXw7+ldzjFLtn6EiFj1dqrnvbCUo/ci7hSXflJFvDNjKjz5mAxGxdAOp0ku3k5bPwdTWAQ==",
       "dependencies": {
         "lodash.isequal": "^4.5.0",
         "randomcolor": "^0.6.2"

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@maplibre/maplibre-gl-geocoder": "^1.5.0",
-    "@maplibre/maplibre-gl-inspect": "^1.6.1",
+    "@maplibre/maplibre-gl-inspect": "^1.6.3",
     "@maplibre/maplibre-gl-style-spec": "^20.1.0",
     "@mdi/js": "^6.6.96",
     "@mdi/react": "^1.5.0",

src/components/MapMaplibreGl.tsx

@@ -126,7 +126,6 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
     }
     if (this.state.inspect && this.props.inspectModeEnabled) {
       this.state.inspect!.setOriginalStyle(this.props.replaceAccessTokens(this.props.mapStyle));
-      this.state.inspect!.render();
     }
     if (map) {
       map.showTileBoundaries = this.props.options?.showTileBoundaries!;
@@ -177,7 +176,7 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
       showInspectButton: false,
       blockHoverPopupOnClick: true,
       assignLayerColor: (layerId: string, alpha: number) => {
-        return Color(colors.brightColor(layerId, alpha as any)).desaturate(0.5).string()
+        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
       },
       buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: (features: InspectFeature[]) => {

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -15,8 +15,8 @@ function displayValue(value: string | number | Date | object | undefined) {
   return value;
 }
 
-function renderKeyValueTableRow(key: string, value: string | undefined, idx: number) {
-  return <tr key={`${key}-${value}-${idx}`}>
+function renderKeyValueTableRow(key: string, value: string | undefined) {
+  return <tr key={key}>
     <td className="maputnik-popup-table-cell">{key}</td>
     <td className="maputnik-popup-table-cell">{value}</td>
   </tr>
@@ -24,14 +24,14 @@ function renderKeyValueTableRow(key: string, value: string | undefined, idx: num
 
 function renderFeature(feature: InspectFeature, idx: number) {
   return <React.Fragment key={idx}>
-    <tr key={`counter-${idx}`}>
+    <tr>
       <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, idx)}
-    {renderKeyValueTableRow("Feature ID", displayValue(feature.id), idx)}
+    {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), idx)
+      return renderKeyValueTableRow(propertyName, displayValue(property))
     })}
   </React.Fragment>
 }

src/libs/highlight.ts

@@ -24,7 +24,7 @@ export function colorHighlightedLayer(layer?: LayerSpecification): HighlightedLa
   if(!layer || layer.type === 'background' || layer.type === 'raster') return null
 
   const sourceLayerId = layer['source-layer'] || ''
-  const color = colors.brightColor(sourceLayerId, 1 as any);
+  const color = colors.brightColor(sourceLayerId, 1);
 
   if(layer.type === "fill" || layer.type === 'fill-extrusion') {
     return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']), layer)