Displaying waypoints (and installing a plugin to import SVG files as components)

src/components/gpx/GpxViewer.tsx

@@ -1,6 +1,7 @@
-import { Component } from 'solid-js';
+import { Component, For } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import Tree from '../tree';
+import { WptViewer } from '../wpt';
 import GpxIcon from './GpxIcon';
 
 interface Props {
@@ -18,13 +19,25 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
     <Tree
       title={
         <>
-          <GpxIcon />
-          {' '}
-          {title()}
+          <GpxIcon /> {title()}
         </>
       }
       content={undefined}
-      subTree={undefined}
+      subTree={
+        <For
+          each={Object.keys(restrictToHierarchy).filter((key: string) =>
+            key.startsWith('gpx/')
+          )}
+        >
+          {(key: string) => {
+            const child = restrictToHierarchy[key];
+            if (child.type === 'wpt') {
+              return <WptViewer wptId={key} />;
+            }
+            return <></>;
+          }}
+        </For>
+      }
     />
   );
 };

src/components/wpt/WptViewer.tsx

@@ -0,0 +1,30 @@
+import { Component } from 'solid-js';
+import WptIcon from '../../icons/location-pin-svgrepo-com.svg?component-solid';
+import { peekCachedSignal } from '../../workers/cached-signals';
+import Tree from '../tree';
+
+interface Props {
+  wptId: string;
+}
+
+const WptViewer: Component<Props> = ({ wptId }) => {
+  const wpt = peekCachedSignal({ id: wptId, method: 'getWpt' });
+  console.log({ caller: 'WptViewer', wptId, wpt: wpt() });
+  const title = () => {
+    return wpt().name;
+  };
+
+  return (
+    <Tree
+      title={
+        <>
+          <WptIcon /> {title()}
+        </>
+      }
+      content={undefined}
+      subTree={undefined}
+    />
+  );
+};
+
+export default WptViewer;

src/components/wpt/index.ts

@@ -1 +1,3 @@
 export { default } from './Wpt';
+
+export { default as WptViewer } from './WptViewer';

src/icons/location-pin-svgrepo-com.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="297" height="297" >
+	 width="24" height="24" viewBox="0 0 300 300">
 <g color='black' stroke='black' >
 	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
 		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645