Update frequencies to communications, fixed control icons

ui/src/components/CustomControl.tsx

@@ -13,63 +13,55 @@ interface Props {
 
 export function CustomControl({ position = 'bottomright', onClick, active = false, title = '', children }: Props) {
   const map = useMap();
-
-  // Create references
-  const buttonRef = useRef<HTMLAnchorElement | null>(null);
-  const reactRootRef = useRef<Root | null>(null);
+  const controlRef = useRef<L.Control>(null);
+  const rootRef = useRef<Root>(null);
 
   useEffect(() => {
     const ctrl = new L.Control({ position });
-
     ctrl.onAdd = () => {
-      const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
-      const button = L.DomUtil.create('a', '', container) as HTMLAnchorElement;
-      button.href = '#';
-      button.title = title;
+      return L.DomUtil.create('div', 'leaflet-bar leaflet-control custom-control');
+    }
 
-      // Prevent clicks/scrolls on the control from hitting the map
-      L.DomEvent.disableClickPropagation(container);
-      L.DomEvent.disableScrollPropagation(container);
-
-      // Wire up the handler
-      L.DomEvent.on(button, 'click', L.DomEvent.stop);
-      L.DomEvent.on(button, 'click', L.DomEvent.preventDefault);
-      L.DomEvent.on(button, 'click', () => onClick());
-
-      buttonRef.current = button;
-
-      // Initial active status
-      if (active) {
-        button.classList.add('active');
-      }
-
-      // Render children
-      if (children) {
-        reactRootRef.current = createRoot(button);
-        reactRootRef.current.render(children);
-      }
-      return container;
-    };
-
-    // Add component to the map
     ctrl.addTo(map);
+    controlRef.current = ctrl;
+
+    // @ts-expect-error ctrl is a L.Control
+    const container = (ctrl as unknown)._container as HTMLElement;
+    rootRef.current = createRoot(container);
 
-    // On unmount, remove component
     return () => {
-      ctrl.remove();
-      if (reactRootRef.current) {
-        reactRootRef.current.unmount();
-        reactRootRef.current = null;
+      if (rootRef.current) {
+        rootRef.current!.unmount();
+        rootRef.current = null;
       }
+      ctrl.remove();
     };
-  }, [map, position, onClick, children, active, title]);
+  }, [map, position]);
 
   useEffect(() => {
-    const btn = buttonRef.current;
-    if (!btn) return;
-    if (active) btn.classList.add('active');
-    else btn.classList.remove('active');
-  }, [active]);
+    if (rootRef.current) {
+      rootRef.current.render(
+        <a
+          href={'#'}
+          title={title}
+          className={active ? 'active' : ''}
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick();
+          }}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px'
+          }}
+        >
+          {children}
+        </a>
+      )
+    }
+  }, [onClick, active, title, children]);
 
   return null;
 }