From e6269521510e474ed8ed665d613de77f495f7d38 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Thu, 21 Sep 2023 00:12:50 +1000
Subject: [PATCH] Update wording

---
 .../layer-editor/layers/queryLayerSource.tsx  | 42 ++++++++++++-------
 .../renderer/map-parser/grid/index.tsx        | 19 +++++----
 .../components/renderer/map-parser/index.tsx  |  5 +--
 .../renderer/map-parser/mesh/index.tsx        |  3 +-
 .../renderer/map-parser/network/index.tsx     |  3 +-
 .../renderer/map-parser/poly/index.tsx        |  3 +-
 6 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/client/src/components/layer-editor/layers/queryLayerSource.tsx b/client/src/components/layer-editor/layers/queryLayerSource.tsx
index 8f3d294d..7c29c46e 100644
--- a/client/src/components/layer-editor/layers/queryLayerSource.tsx
+++ b/client/src/components/layer-editor/layers/queryLayerSource.tsx
@@ -12,6 +12,7 @@ import { LayerSource, inferLayerName } from "./LayerSource";
 import { Option } from "./Option";
 import { MapLayerData } from "./mapLayerSource";
 import { TraceLayerData, traceLayerSource } from "./traceLayerSource";
+import { Typography as Type } from "@mui/material";
 
 async function findConnection(
   connections: Connection[],
@@ -41,43 +42,54 @@ export const queryLayerSource: LayerSource<"query", QueryLayerData> = {
     const [{ algorithms }] = useFeatures();
     const [connections] = useConnections();
     const filteredLayers = filter(layers, (c) => c.source?.type === "map");
+    const selectedLayer = find(filteredLayers, { key: mapLayerKey });
     return (
       <>
         <Option
-          label="Map Layer"
+          label="Algorithm"
           content={
             <FeaturePicker
               showArrow
-              label="Map Layer"
-              value={mapLayerKey}
-              items={filteredLayers.map((c) => ({
-                id: c.key,
-                name: inferLayerName(c),
+              label="Choose Algorithm"
+              value={algorithm}
+              items={algorithms.map((c) => ({
+                ...c,
+                description: find(connections, { url: c.source })?.name,
               }))}
               onChange={async (v) =>
-                produce((p) => set(p, "source.mapLayerKey", v))
+                produce((p) => set(p, "source.algorithm", v))
               }
             />
           }
         />
+        {!algorithms?.length && (
+          <Type variant="body2" color="warning.main" sx={{ mb: 1 }}>
+            No connected solver has declared support for running algorithms
+          </Type>
+        )}
         <Option
-          label="Algorithm"
+          label="Map"
           content={
             <FeaturePicker
               showArrow
-              icon={<CodeIcon />}
-              label="Algorithm"
-              value={algorithm}
-              items={algorithms.map((c) => ({
-                ...c,
-                description: find(connections, { url: c.source })?.name,
+              label="Choose Layer"
+              value={mapLayerKey}
+              items={filteredLayers.map((c) => ({
+                id: c.key,
+                name: inferLayerName(c),
               }))}
               onChange={async (v) =>
-                produce((p) => set(p, "source.algorithm", v))
+                produce((p) => set(p, "source.mapLayerKey", v))
               }
             />
           }
         />
+        {selectedLayer && (
+          <Type variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+            Hint: Define source and destination nodes by clicking on valid
+            regions on {inferLayerName(selectedLayer)}
+          </Type>
+        )}
       </>
     );
   }),
diff --git a/client/src/components/renderer/map-parser/grid/index.tsx b/client/src/components/renderer/map-parser/grid/index.tsx
index 13cd08d7..b9547604 100644
--- a/client/src/components/renderer/map-parser/grid/index.tsx
+++ b/client/src/components/renderer/map-parser/grid/index.tsx
@@ -10,14 +10,17 @@ function between(v: number, min: number, max: number) {
   return v >= min && v < max;
 }
 
-export const parse: MapParser = memo(async (m = "", options: Options) => {
-  return {
-    ...(await parseGridAsync({
-      map: m,
-      options,
-    })),
-  };
-});
+export const parse: MapParser = memo(
+  async (m = "", options: Options) => {
+    return {
+      ...(await parseGridAsync({
+        map: m,
+        options,
+      })),
+    };
+  },
+  { normalizer: JSON.stringify }
+);
 
 export const hydrate: ParsedMapHydrator = (result) => {
   const { width, height } = result.bounds;
diff --git a/client/src/components/renderer/map-parser/index.tsx b/client/src/components/renderer/map-parser/index.tsx
index 5146058e..6d539c74 100644
--- a/client/src/components/renderer/map-parser/index.tsx
+++ b/client/src/components/renderer/map-parser/index.tsx
@@ -1,10 +1,9 @@
 import { Dictionary } from "lodash";
-import memoize from "memoizee";
+import { MapParser, ParsedMapHydrator } from "./Parser";
 import * as grid from "./grid";
-import * as xy from "./network";
 import * as mesh from "./mesh";
+import * as xy from "./network";
 import * as poly from "./poly";
-import { MapParser, ParsedMapHydrator } from "./Parser";
 
 export const mapParsers: Dictionary<{
   parse: MapParser;
diff --git a/client/src/components/renderer/map-parser/mesh/index.tsx b/client/src/components/renderer/map-parser/mesh/index.tsx
index a55308f7..c1a5350f 100644
--- a/client/src/components/renderer/map-parser/mesh/index.tsx
+++ b/client/src/components/renderer/map-parser/mesh/index.tsx
@@ -10,7 +10,8 @@ export const parse: MapParser = memo(
     await parseMeshAsync({
       map: m,
       options,
-    })
+    }),
+  { normalizer: JSON.stringify }
 );
 
 export const hydrate: ParsedMapHydrator = (result) => ({
diff --git a/client/src/components/renderer/map-parser/network/index.tsx b/client/src/components/renderer/map-parser/network/index.tsx
index f4b8b722..d81be7b4 100644
--- a/client/src/components/renderer/map-parser/network/index.tsx
+++ b/client/src/components/renderer/map-parser/network/index.tsx
@@ -10,7 +10,8 @@ export const parse: MapParser = memo(
     await parseNetworkAsync({
       map: m,
       options,
-    })
+    }),
+  { normalizer: JSON.stringify }
 );
 
 export const hydrate: ParsedMapHydrator = (result) => ({
diff --git a/client/src/components/renderer/map-parser/poly/index.tsx b/client/src/components/renderer/map-parser/poly/index.tsx
index 0cefb18a..eac3a5f3 100644
--- a/client/src/components/renderer/map-parser/poly/index.tsx
+++ b/client/src/components/renderer/map-parser/poly/index.tsx
@@ -10,7 +10,8 @@ export const parse: MapParser = memo(
     await parsePolyAsync({
       map: m,
       options,
-    })
+    }),
+  { normalizer: JSON.stringify }
 );
 
 export const hydrate: ParsedMapHydrator = (result: ParsedMap) => ({