From 37b2d3a5d66342d580cfc2362478f07d549ae24e Mon Sep 17 00:00:00 2001
From: Chad Burt <chad@underbluewaters.net>
Date: Tue, 8 Aug 2023 11:12:16 -0700
Subject: [PATCH] Add geostats info modal

---
 .../data/GLStyleEditor/GLStyleEditor.tsx      | 136 +++++++++---------
 .../data/GLStyleEditor/GeostatsModal.tsx      | 107 ++++++++++++++
 2 files changed, 176 insertions(+), 67 deletions(-)
 create mode 100644 packages/client/src/admin/data/GLStyleEditor/GeostatsModal.tsx

diff --git a/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx b/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx
index f212c9ea6..240db00dc 100644
--- a/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx
+++ b/packages/client/src/admin/data/GLStyleEditor/GLStyleEditor.tsx
@@ -43,7 +43,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { CaretDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands";
 import { MapContext } from "../../../dataLayers/MapContextManager";
-import { useOverlayState } from "../../../components/TreeView";
+import GeostatsModal, { Geostats } from "./GeostatsModal";
 
 require("./RadixDropdown.css");
 
@@ -90,6 +90,8 @@ export default function GLStyleEditor(props: GLStyleEditorProps) {
     selectedSpriteId: number | null;
   }>(null);
 
+  const [geostatsModal, setGeostatsModal] = useState<null | Geostats>(null);
+
   const extensions = useMemo(() => {
     return [
       json(),
@@ -192,41 +194,53 @@ export default function GLStyleEditor(props: GLStyleEditorProps) {
         className="p-2 border-b border-black border-opacity-30 z-10 shadow flex space-x-2 flex-0"
         style={{ backgroundColor: "#303841" }}
       >
-        <DropdownMenu.Root>
-          <DropdownTrigger label="View" ariaLabel="View menu" />
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              disabled={!props.bounds}
-              onClick={() => {
-                if (mapContext.manager && props.geostats) {
-                  mapContext.manager.map?.fitBounds(props.bounds!);
-                }
-              }}
-              label="Show Layer Extent"
-            />
-            {props.tocItemId && (
-              <DropdownMenuItem
-                label="Hide all other overlays"
-                disabled={
-                  !visibleLayers ||
-                  (visibleLayers.length === 1 &&
-                    visibleLayers[0] === props.tocItemId)
-                }
-                onClick={() => {
-                  if (mapContext.manager && props.geostats) {
-                    mapContext.manager.setVisibleTocItems([props.tocItemId!]);
-                  }
-                }}
-              />
-            )}
-            <DropdownMenuItem
-              label="View layer column summary"
-              disabled={true}
-              onClick={() => {}}
-            />
-          </DropdownMenuContent>
-        </DropdownMenu.Root>
-
+        {props.tocItemId && (
+          <>
+            <DropdownMenu.Root>
+              <DropdownTrigger label="View" ariaLabel="View menu" />
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  disabled={!props.bounds}
+                  onClick={() => {
+                    if (mapContext.manager && props.geostats) {
+                      mapContext.manager.map?.fitBounds(props.bounds!);
+                    }
+                  }}
+                  label="Show layer extent"
+                />
+                {props.tocItemId && (
+                  <DropdownMenuItem
+                    label="Hide all other overlays"
+                    disabled={
+                      !visibleLayers ||
+                      (visibleLayers.length === 1 &&
+                        visibleLayers[0] === props.tocItemId)
+                    }
+                    onClick={() => {
+                      if (mapContext.manager && props.geostats) {
+                        mapContext.manager.setVisibleTocItems([
+                          props.tocItemId!,
+                        ]);
+                      }
+                    }}
+                  />
+                )}
+                {props.geostats && (
+                  <DropdownMenuItem
+                    label="Open layer property details"
+                    disabled={!props.geostats}
+                    onClick={() => {
+                      setGeostatsModal({
+                        layers: [props.geostats!],
+                        layerCount: 1,
+                      });
+                    }}
+                  />
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu.Root>
+          </>
+        )}
         <DropdownMenu.Root>
           <DropdownTrigger label="Edit" ariaLabel="Edit menu" />
           <DropdownMenuContent>
@@ -262,8 +276,13 @@ export default function GLStyleEditor(props: GLStyleEditorProps) {
               }}
               keyCode={`${mac ? "⌘" : "^"}+F`}
             />
-            <DropdownSeperator />
-            <DropdownLabel label="Insert a new layer" />
+
+            {props.tocItemId && (
+              <>
+                <DropdownSeperator />
+                <DropdownLabel label="Insert a new layer" />
+              </>
+            )}
             {layerTypes.map((type) => (
               <DropdownSubmenu
                 label={type === "symbol" ? "Labels & Symbols" : type}
@@ -343,12 +362,14 @@ export default function GLStyleEditor(props: GLStyleEditorProps) {
             ))}
           </DropdownMenuContent>
         </DropdownMenu.Root>
-        <span className="font-mono text-sm bg-gray-700 text-blue-300 text-opacity-80 px-1 py-0.5 rounded w-24 text-center tabular-nums">
-          zoom{" "}
-          <span className="font-mono ">
-            {Math.round(zoom) === zoom ? zoom + ".0" : zoom}
+        {props.tocItemId && (
+          <span className="font-mono text-sm bg-gray-700 text-blue-300 text-opacity-80 px-1 py-0.5 rounded w-24 text-center tabular-nums">
+            zoom{" "}
+            <span className="font-mono ">
+              {Math.round(zoom) === zoom ? zoom + ".0" : zoom}
+            </span>
           </span>
-        </span>
+        )}
       </div>
 
       <SpritePopover spriteState={spriteState} onChange={onSpriteChange} />
@@ -379,30 +400,11 @@ export default function GLStyleEditor(props: GLStyleEditorProps) {
           }
         }}
       />
-      {insertLayerOptions && (
-        <InsertLayerModal
-          onRequestClose={() => setInsertLayerOptions(null)}
-          options={insertLayerOptions}
-          onSelect={(option) => {
-            setInsertLayerOptions(null);
-            if (editorRef.current?.view) {
-              const editorView = editorRef.current?.view;
-              editorView.dispatch({
-                changes: {
-                  from: editorView.state.doc.length - 2,
-                  to: editorView.state.doc.length - 2,
-                  insert:
-                    editorView.state.doc.length > 10
-                      ? "," + JSON.stringify(option.layer)
-                      : JSON.stringify(option.layer),
-                },
-                scrollIntoView: true,
-                selection: {
-                  anchor: editorView.state.doc.length - 1,
-                },
-              });
-              formatJSONCommand(editorView);
-            }
+      {geostatsModal && (
+        <GeostatsModal
+          geostats={geostatsModal}
+          onRequestClose={() => {
+            setGeostatsModal(null);
           }}
         />
       )}
diff --git a/packages/client/src/admin/data/GLStyleEditor/GeostatsModal.tsx b/packages/client/src/admin/data/GLStyleEditor/GeostatsModal.tsx
new file mode 100644
index 000000000..d3a4c6f1c
--- /dev/null
+++ b/packages/client/src/admin/data/GLStyleEditor/GeostatsModal.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable i18next/no-literal-string */
+import Badge from "../../../components/Badge";
+import Modal from "../../../components/Modal";
+import { GeostatsLayer } from "./extensions/glStyleAutocomplete";
+
+export interface Geostats {
+  layers: GeostatsLayer[];
+  layerCount: number;
+}
+
+interface GeostatsModalProps {
+  geostats: Geostats;
+  onRequestClose: () => void;
+}
+
+/**
+ * Displays information about the layers included in the geostats prop.
+ * @param props
+ * @returns
+ */
+export default function GeostatsModal(props: GeostatsModalProps) {
+  return (
+    <Modal onRequestClose={props.onRequestClose} open={true}>
+      <div className="px-0 py-4 pb-1">
+        <h2 className="text-lg font-medium leading-6 text-gray-900">Layers</h2>
+        <div className="mt-4">
+          <div className="bg-white shadow overflow-hidden sm:rounded-md">
+            <ul className="divide-y divide-gray-200">
+              {props.geostats.layers.map((layer) => (
+                <li key={layer.layer}>
+                  <div className="px-4 py-4 sm:px-6">
+                    <div className="flex items-center justify-between">
+                      <p className="text-sm font-medium text-indigo-600 truncate">
+                        {layer.layer}
+                      </p>
+                      <div className="ml-2 flex-shrink-0 flex">
+                        <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                          {layer.geometry}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-2 sm:flex sm:justify-between">
+                      <div className="sm:flex">
+                        <p className="flex items-center text-sm text-gray-500">
+                          {layer.count} features
+                        </p>
+                      </div>
+                      <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                        {layer.attributeCount} properties
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <div className="border-t border-gray-200">
+                      <dl>
+                        <div className="bg-gray-50 px-4 py-4 ">
+                          <div className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                            <ul className="border border-gray-200 rounded-md divide-y divide-gray-200">
+                              {layer.attributes.map((attribute) => (
+                                <>
+                                  <div
+                                    key={attribute.attribute}
+                                    className="pl-3 pr-4 py-3 flex items-center justify-between text-sm clear-both"
+                                  >
+                                    <div className="w-0 flex-1 flex items-center">
+                                      <span className="ml-2 flex-1 w-0 truncate font-semibold text-gray-600">
+                                        {attribute.attribute}
+                                      </span>
+                                    </div>
+                                    <div className="ml-4 flex-shrink-0">
+                                      <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        {attribute.type}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div className="clear-both overflow-auto max-h-32 bg-white p-2 font-mono text-gray-500 ">
+                                    {attribute.type === "number" &&
+                                    attribute.values.length > 10
+                                      ? attribute.min !== undefined &&
+                                        attribute.max !== undefined
+                                        ? `${attribute.min} - ${attribute.max}`
+                                        : `${attribute.values.length} values`
+                                      : attribute.values
+                                          .map((v) =>
+                                            /,/.test(v?.toString() || "")
+                                              ? (v = `"${v}"`)
+                                              : v
+                                          )
+                                          .join(", ")}
+                                  </div>
+                                </>
+                              ))}
+                            </ul>
+                          </div>
+                        </div>
+                      </dl>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}