Dirty display of vector tiles feature properties in Infos.tsx

src/components/infos/Infos.tsx

@@ -21,6 +21,7 @@ const Item = styled(Paper)(({ theme }) => ({
 const [open, setOpen] = createSignal(false);
 
 let selectedFeatures: Feature[] = [];
+let vectorLayerFeatures: Feature[] = [];
 let hierarchy: any = {};
 
 const level2Key = (feature: Feature) =>
@@ -39,6 +40,10 @@ export const clickHandler = (event: any) => {
     }
   });
   selectedFeatures = features.filter((feature: any) => feature.get('context'));
+  vectorLayerFeatures = features.filter(
+    (feature: any) => !feature.get('context')
+  );
+
   selectedFeatures.sort((f1: Feature, f2: Feature) => {
     const ctx1 = f1.get('context');
     const ctx2 = f2.get('context');
@@ -93,6 +98,7 @@ export const clickHandler = (event: any) => {
     event,
     features,
     hierarchy,
+    vectorLayerFeatures,
   });
   selectedFeatures.map((feature: Feature<Geometry>) => {
     const id = feature.get('id');
@@ -108,7 +114,7 @@ export const clickHandler = (event: any) => {
       //      length,
     });
   });
-  if (selectedFeatures.length > 0) {
+  if (selectedFeatures.length > 0 || vectorLayerFeatures.length > 0) {
     setOpen(true);
   }
 };
@@ -118,7 +124,7 @@ const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
 }) => {
   return (
     <Tree
-      title={featuresHierarchy.type || 'root'}
+      title={featuresHierarchy.type || 'voyages'}
       content={undefined}
       subTree={Object.keys(featuresHierarchy)
         .filter((key: string) => key.startsWith('gpx/'))
@@ -143,7 +149,50 @@ const Infos: Component<{}> = (props) => {
         alignItems='center'
         sx={{ width: 'calc(100% - 5px)' }}
       >
-        <FeaturesTree featuresHierarchy={hierarchy} />
+        <Tree
+          title='everything'
+          content={undefined}
+          subTree={
+            <>
+              <Tree
+                title='osm'
+                content={undefined}
+                subTree={
+                  <>
+                    <For each={vectorLayerFeatures}>
+                      {(feature) => (
+                        <Tree
+                          title={`${feature.get('class')} ${
+                            feature.get('name') || ''
+                          }`}
+                          content={
+                            <>
+                              <>
+                                {console.log({
+                                  caller: 'Infos / vector layer feature',
+                                  properties: feature.getProperties(),
+                                })}
+                              </>
+                              <For each={Object.keys(feature.getProperties())}>
+                                {(key: string) => (
+                                  <div>{`${key}: ${
+                                    feature.getProperties()[key]
+                                  }`}</div>
+                                )}
+                              </For>
+                            </>
+                          }
+                          subTree={undefined}
+                        />
+                      )}
+                    </For>
+                  </>
+                }
+              />
+              <FeaturesTree featuresHierarchy={hierarchy} />
+            </>
+          }
+        />
       </Stack>
     </Dialog>
   );