Refactor located links

plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/LinkDetail.tsx

@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/macro";
+import { useMemo } from "preact/compat";
 import { useState } from "preact/hooks";
 import { useCallback } from "react";
 
@@ -12,6 +13,7 @@ import {
     getQueryByLinkType,
     usePointToPointErrors,
 } from "plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks";
+import { useNodes } from "plugins/lime-plugin-mesh-wide/src/hooks/useNodes";
 import { MacToMacLink } from "plugins/lime-plugin-mesh-wide/src/lib/links/PointToPointLink";
 import { readableBytes } from "plugins/lime-plugin-mesh-wide/src/lib/utils";
 import { useSetLinkReferenceState } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
@@ -227,7 +229,11 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         type: reference.type,
     });
 
-    const isDown = !errors.linkUp;
+    const {
+        allNodes: { meshWideNodesReference, meshWideNodesActual },
+    } = useNodes();
+
+    const isDown = !errors?.linkUp;
 
     // Check if there are errors of global reference state to shown
     const { reference: fetchDataReference } = getQueryByLinkType(
@@ -245,14 +251,23 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
         useSetLinkReferenceStateModal();
     const { showToast } = useToast();
 
-    // Generate a list of nodes to update
-    const nodesToUpdate = reference.nodes.reduce((acc, node) => {
-        acc[node.ipv4] = node.hostname;
-        return acc;
-    }, {});
-
-    // todo(kon): Sync mutations, used to sync data between nodes and local node after setting the reference state
-    // useSharedStateSync
+    // Get nodes to update
+    const nodesToUpdate = useMemo(() => {
+        // First get an object with all nodes
+        const allNodes = {
+            ...(meshWideNodesReference || {}),
+            ...(meshWideNodesActual || {}),
+        };
+        if (!allNodes) return {};
+        // Then reduce the nodes to update
+        return reference.nodes.reduce((acc, node) => {
+            // If the node with node name exist get the ipv4 and hostname
+            if (allNodes[node]) {
+                acc[allNodes[node].ipv4] = allNodes[node].hostname;
+            }
+            return acc;
+        }, {});
+    }, [meshWideNodesReference, meshWideNodesActual, reference.nodes]);
 
     // Mutation to update the reference state
     const { callMutations } = useSetLinkReferenceState({
@@ -328,20 +343,6 @@ export const LinkReferenceStatus = ({ reference }: LinkMapFeature) => {
     const showSetReferenceButton =
         errors?.hasErrors || isDown || isNewLink || referenceError;
 
-    console.log(
-        "AAAAA",
-        "hasError",
-        hasError,
-        "showSetReferenceButton",
-        showSetReferenceButton,
-        "isDown",
-        isDown,
-        "isNewNode",
-        isNewLink,
-        "referenceError",
-        referenceError
-    );
-
     return (
         <StatusAndButton
             isError={hasError}

plugins/lime-plugin-mesh-wide/src/components/FeatureDetail/ShowErrorsDetail.tsx

@@ -40,25 +40,18 @@ export const ShowErrorsDetail = ({ errors }: { errors: ErrorsDetails }) => {
                     </Row>
                     <div className={"flex flex-column gap-5"}>
                         {[...errors.dataNotSetErrors].map((data, k) => {
-                            let dataType = data.queryKey[2]["data_type"];
-                            if (!dataType) {
-                                dataType = JSON.stringify(
-                                    data.queryKey,
-                                    null,
-                                    2
-                                );
-                                return (
-                                    <div key={k}>
-                                        {dataType}: {data?.error?.toString()}
-                                    </div>
-                                );
-                            }
+                            const dataType = data.queryKey[2]["data_type"];
+                            const nodes = data.nodeNames.join(", ");
                             return (
-                                <div key={k} className={"text-2xl font-bold"}>
-                                    <Trans>
-                                        Reference state is not set for{" "}
+                                <div key={k} className={"flex flex-row gap-5"}>
+                                    <div className={"text-2xl font-bold"}>
                                         {dataType}
-                                    </Trans>
+                                    </div>
+                                    {nodes && (
+                                        <Trans>
+                                            for the following nodes: {nodes}
+                                        </Trans>
+                                    )}
                                 </div>
                             );
                         })}

plugins/lime-plugin-mesh-wide/src/components/Map/FloatingAlert.tsx

@@ -10,23 +10,21 @@ export const FloatingAlert = () => {
     const { setData: setSelectedFeature, data: selectedMapFeature } =
         useSelectedMapFeature();
 
-    const {
-        hasInvalidNodes,
-        invalidNodes: { invalidNodesReference, invalidNodesActual },
-    } = useNodes();
+    const { hasNonLocatedNodes, nonLocatedNodes } = useNodes();
     const { meshWideDataErrors, dataNotSetErrors } = useMeshWideDataErrors();
 
     const hasErrors =
-        hasInvalidNodes || meshWideDataErrors.length || dataNotSetErrors.length;
+        hasNonLocatedNodes ||
+        meshWideDataErrors.length ||
+        dataNotSetErrors.length;
 
     const callback = useCallback(() => {
         if (selectedMapFeature && selectedMapFeature.id === "errorsDetails") {
             setSelectedFeature(null);
             return;
         }
         const invalidNodes: InvalidNodes = new Set([
-            ...Object.keys(invalidNodesReference ?? []),
-            ...Object.keys(invalidNodesActual ?? []),
+            ...Object.keys(nonLocatedNodes ?? []),
         ]);
 
         setSelectedFeature({
@@ -40,9 +38,8 @@ export const FloatingAlert = () => {
         });
     }, [
         dataNotSetErrors,
-        invalidNodesActual,
-        invalidNodesReference,
         meshWideDataErrors,
+        nonLocatedNodes,
         selectedMapFeature,
         setSelectedFeature,
     ]);

plugins/lime-plugin-mesh-wide/src/components/Map/LinkLine.tsx

@@ -53,6 +53,8 @@ export const LinkLine = ({ referenceLink, actualLink }: ILinkLineProps) => {
         };
     };
 
+    if (linkToShow.hasInValidCoordinates()) return <></>;
+
     const coordinates = linkToShow.coordinates.map((c) => [c.lat, c.long]);
 
     return (

plugins/lime-plugin-mesh-wide/src/containers/Map.tsx

@@ -78,13 +78,22 @@ export const MeshWideMap = ({
         }
     }, [loading, nodeLocation]);
 
+    // @ts-ignore
     const mapSupportedLayers: Record<
         keyof MeshWideMapTypes,
-        { name: string; layer: ComponentChildren }
+        { name: string; layer: ComponentChildren; checked: boolean }
     > = {
-        node_info: { name: "Nodes", layer: <NodesLayer /> },
-        wifi_links_info: { name: "Wifi Links", layer: <WifiLinksLayer /> },
-        bat_links_info: { name: "Batman", layer: <BatmanLinksLayer /> },
+        node_info: { name: "Nodes", layer: <NodesLayer />, checked: nodes },
+        wifi_links_info: {
+            name: "Wifi Links",
+            layer: <WifiLinksLayer />,
+            checked: wifiLinks,
+        },
+        bat_links_info: {
+            name: "Batman",
+            layer: <BatmanLinksLayer />,
+            checked: batmanLinks,
+        },
     };
 
     return (
@@ -100,11 +109,17 @@ export const MeshWideMap = ({
                 url={openStreetMapTileString}
             />
             <LayersControl position="topright">
-                {Object.values(mapSupportedLayers).map(({ name, layer }, k) => (
-                    <LayersControl.Overlay key={k} checked={true} name={name}>
-                        <LayerGroup>{layer}</LayerGroup>
-                    </LayersControl.Overlay>
-                ))}
+                {Object.values(mapSupportedLayers).map(
+                    ({ name, layer, checked }, k) => (
+                        <LayersControl.Overlay
+                            key={k}
+                            name={name}
+                            checked={checked}
+                        >
+                            <LayerGroup>{layer}</LayerGroup>
+                        </LayersControl.Overlay>
+                    )
+                )}
             </LayersControl>
         </MapContainer>
     );

plugins/lime-plugin-mesh-wide/src/containers/MapLayers/NodesLayer.tsx

@@ -5,19 +5,19 @@ import { INodeInfo } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 const NodesLayer = () => {
     const {
         locatedNodes: {
-            locatedNodesReference: referenceNodes,
-            locatedNodesActual: meshWideNodesActual,
+            locatedNodesReference,
+            locatedNodesActual,
             locatedNewNodes,
         },
     } = useNodes();
 
     return (
         <>
-            {referenceNodes &&
-                Object.entries(referenceNodes).map(([k, v], i) => {
+            {locatedNodesReference &&
+                Object.entries(locatedNodesReference).map(([k, v], i) => {
                     let actualNode: INodeInfo;
-                    if (meshWideNodesActual) {
-                        actualNode = meshWideNodesActual[k];
+                    if (locatedNodesActual) {
+                        actualNode = locatedNodesActual[k];
                     }
                     return (
                         <NodeMarker

plugins/lime-plugin-mesh-wide/src/hooks/useLocatedLinks.tsx

@@ -73,22 +73,35 @@ const useCalculateLocatedLinks = ({
     const { data: linksReference } = fetchDataReference({});
     const { data: links } = fetchData({});
     const {
-        locatedNodes: { allLocatedNodes: meshWideNodes },
+        locatedNodes: {
+            locatedNodesReference,
+            locatedNodesActual,
+            locatedNewNodes,
+        },
     } = useNodes();
 
+    // Used to have on a single list all the located nodes
+    // This is used to have an easier way to draw links between nodes
+    // that are not active, or not on reference or new
+    const meshWideNodes = {
+        ...locatedNodesReference,
+        ...locatedNodesActual,
+        ...locatedNewNodes,
+    };
+
     const locatedLinksReference: LocatedLinkData = useMemo(() => {
-        if (meshWideNodes && linksReference) {
+        if (linksReference) {
             return mergeLinksAndCoordinates(
-                meshWideNodes,
                 linksReference,
-                type
+                type,
+                meshWideNodes
             );
         }
-    }, [meshWideNodes, linksReference, type]);
+    }, [linksReference, meshWideNodes, type]);
 
     const locatedLinks: LocatedLinkData = useMemo(() => {
-        if (links && meshWideNodes) {
-            return mergeLinksAndCoordinates(meshWideNodes, links, type);
+        if (links) {
+            return mergeLinksAndCoordinates(links, type, meshWideNodes);
         }
     }, [links, meshWideNodes, type]);
 

plugins/lime-plugin-mesh-wide/src/hooks/useMeshWideDataErrors.tsx

@@ -10,7 +10,12 @@ import {
     useMeshWideNodes,
     useMeshWideNodesReference,
 } from "plugins/lime-plugin-mesh-wide/src/meshWideQueries";
-import { MeshWideDataError } from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
+import {
+    IBatmanLinks,
+    INodes,
+    IWifiLinks,
+    MeshWideDataError,
+} from "plugins/lime-plugin-mesh-wide/src/meshWideTypes";
 
 import { isEmpty } from "utils/utils";
 
@@ -29,9 +34,18 @@ export const useMeshWideDataErrors = () => {
     const meshWideDataErrors: MeshWideDataError[] = [];
     const dataNotSetErrors: MeshWideDataError[] = [];
 
-    const addError = (queryKey: QueryKey, error?: unknown, data?: object) => {
-        if (data && isEmpty(data)) {
-            dataNotSetErrors.push({ queryKey, error });
+    const addError = (
+        queryKey: QueryKey,
+        error?: unknown,
+        data?: IWifiLinks | IBatmanLinks | INodes
+    ) => {
+        if (data) {
+            // Check also node by node if reference state is empty
+            const nodeNames = Object.keys(data).filter((key) =>
+                isEmpty(data[key])
+            );
+            if (isEmpty(data) || nodeNames.length)
+                dataNotSetErrors.push({ queryKey, error, nodeNames });
         }
         if (error) {
             meshWideDataErrors.push({ queryKey, error });