Progressing in implementing a tree representation of features.

src/components/infos/Infos.tsx

@@ -8,6 +8,7 @@ import EditIcon from '@suid/icons-material/Edit';
 import { Paper, Stack } from '@suid/material';
 import styled from '@suid/material/styles/styled';
 import Dialog from '../dialog';
+import Tree from '../tree';
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -19,6 +20,7 @@ const Item = styled(Paper)(({ theme }) => ({
 const [open, setOpen] = createSignal(false);
 
 let selectedFeatures: Feature[] = [];
+let hierarchy: any = {};
 
 const level2Key = (feature: Feature) =>
   feature.get('context').wptId ||
@@ -54,11 +56,11 @@ export const clickHandler = (event: any) => {
     }
     return 0;
   });
-  let hierarchy: any = {};
   selectedFeatures.map((feature: Feature<Geometry>) => {
     const gpxId = feature.get('context').gpxId;
     if (!hierarchy.hasOwnProperty(gpxId)) {
       hierarchy[gpxId] = { gpx: feature.get('context').gpx };
+      hierarchy[gpxId].type = 'gpx';
     }
     const l2key = level2Key(feature);
     if (!hierarchy[gpxId].hasOwnProperty(l2key)) {
@@ -71,6 +73,7 @@ export const clickHandler = (event: any) => {
         hierarchy[gpxId][l2key].type = 'trk';
       } else {
         hierarchy[gpxId][l2key].type = feature.get('type');
+        feature;
       }
     }
     if (feature.get('type') === 'trkseg') {
@@ -79,6 +82,8 @@ export const clickHandler = (event: any) => {
         hierarchy[gpxId][l2key][trksegId] = {
           trksegId,
           trkseg: feature.get('context').trkseg,
+          type: 'trkseg',
+          feature,
         };
       }
     }
@@ -108,6 +113,22 @@ export const clickHandler = (event: any) => {
   }
 };
 
+const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
+  featuresHierarchy,
+}) => {
+  return (
+    <Tree
+      title={featuresHierarchy.type || 'root'}
+      content={undefined}
+      subTree={Object.keys(featuresHierarchy)
+        .filter((key: string) => key.startsWith('gpx/'))
+        .map((key: string) => (
+          <FeaturesTree featuresHierarchy={featuresHierarchy[key]} />
+        ))}
+    />
+  );
+};
+
 const Infos: Component<{}> = (props) => {
   const [t, { add, locale, dict }] = useI18n();
   const handleClick = () => {
@@ -136,7 +157,8 @@ const Infos: Component<{}> = (props) => {
         alignItems='center'
         sx={{ width: 'calc(100% - 5px)' }}
       >
-        <For each={selectedFeatures}>
+        <FeaturesTree featuresHierarchy={hierarchy} />
+        {/* <For each={selectedFeatures}>
           {(feature) => {
             const geometry = feature.getGeometry();
             const length = geometry
@@ -162,7 +184,7 @@ const Infos: Component<{}> = (props) => {
               </Item>
             );
           }}
-        </For>
+        </For> */}
       </Stack>
     </Dialog>
   );

src/components/tree/Tree.tsx

@@ -0,0 +1,39 @@
+import { Paper, Stack } from '@suid/material';
+import styled from '@suid/material/styles/styled';
+import { Component, JSXElement, Show } from 'solid-js';
+
+interface Props {
+  title: string;
+  content: JSXElement | undefined;
+  subTree: JSXElement | undefined;
+}
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+const Tree: Component<Props> = ({ title, content, subTree }) => {
+  return (
+    <Stack
+      spacing={1}
+      direction='column'
+      alignItems='center'
+      sx={{ width: 'calc(100% - 5px)' }}
+    >
+      <Item sx={{ width: 'calc(100% - 1px)' }}>
+        <div>{title}</div>
+        <Show when={content !== undefined}>
+          <div>{content}</div>
+        </Show>
+        <Show when={subTree !== undefined}>
+          <div>{subTree}</div>
+        </Show>
+      </Item>
+    </Stack>
+  );
+};
+
+export default Tree;

src/components/tree/index.ts

@@ -0,0 +1 @@
+export { default } from './Tree';