From 011ccc0a99b0fab0035aa071df63963184b89f72 Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Fri, 28 Mar 2025 19:47:40 +0100
Subject: [PATCH 1/3] feature(map): added ability to exclusively show unit
 types

---
 .../react/src/ui/components/olstatebutton.tsx |  6 ++--
 frontend/react/src/ui/panels/header.tsx       | 35 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index 9650fa16..66e96507 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -100,7 +100,7 @@ export function OlRoundStateButton(props: {
   icon: IconProp;
   tooltip?: string | (() => JSX.Element | JSX.Element[]);
   tooltipPosition?: string;
-  onClick: () => void;
+  onClick: (event) => void;
 }) {
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
@@ -123,8 +123,8 @@ export function OlRoundStateButton(props: {
     <>
       <button
         ref={buttonRef}
-        onClick={() => {
-          props.onClick();
+        onClick={(event) => {
+          props.onClick(event);
           setHover(false);
         }}
         data-checked={props.checked}
diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 9f0cabde..7c4d8b0e 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -60,6 +60,16 @@ export function Header() {
   const [enabledCommandModes, setEnabledCommandModes] = useState([] as string[]);
   const [loadingNewCommandMode, setLoadingNewCommandMode] = useState(false);
 
+  const unitViewTypesFilter = {
+    aircraft: olButtonsVisibilityAircraft,
+    helicopter: olButtonsVisibilityHelicopter,
+    "groundunit-sam": olButtonsVisibilityGroundunitSam,
+    groundunit: olButtonsVisibilityGroundunit,
+    navyunit: olButtonsVisibilityNavyunit,
+    airbase: olButtonsVisibilityAirbase,
+    dead: faSkull,
+  }
+
   useEffect(() => {
     HiddenTypesChangedEvent.on((hiddenTypes) => setMapHiddenTypes({ ...hiddenTypes }));
     MapOptionsChangedEvent.on((mapOptions) => {
@@ -418,24 +428,25 @@ export function Header() {
         </div>
         <div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
         <div className={`flex h-fit flex-row items-center justify-start gap-1`}>
-          {Object.entries({
-            aircraft: olButtonsVisibilityAircraft,
-            helicopter: olButtonsVisibilityHelicopter,
-            "groundunit-sam": olButtonsVisibilityGroundunitSam,
-            groundunit: olButtonsVisibilityGroundunit,
-            navyunit: olButtonsVisibilityNavyunit,
-            airbase: olButtonsVisibilityAirbase,
-            dead: faSkull,
-          }).map((entry) => {
+          {Object.entries(unitViewTypesFilter).map((entry) => {
             return (
               <OlRoundStateButton
                 key={entry[0]}
-                onClick={() => {
-                  getApp().getMap().setHiddenType(entry[0], !mapHiddenTypes[entry[0]]);
+                onClick={(event) => {
+                  if (event.ctrlKey) {
+                    Object.entries(unitViewTypesFilter)
+                    .map(ut => ut[0])
+                    .filter(utName => utName !== entry[0])
+                    .forEach(utName => getApp().getMap().setHiddenType(utName, true));
+
+                    getApp().getMap().setHiddenType(entry[0], false);
+                  } else {
+                    getApp().getMap().setHiddenType(entry[0], !mapHiddenTypes[entry[0]]);
+                  }
                 }}
                 checked={!mapHiddenTypes[entry[0]]}
                 icon={entry[1]}
-                tooltip={"Hide/show " + entry[0] + " units"}
+                tooltip={"Hide/show " + entry[0] + " units. Tip: holding ctrl key while clicking will hide other unit categories."}
               />
             );
           })}

From b600b2503bf088cdf53c709bac107d10b51f920c Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Fri, 28 Mar 2025 20:11:35 +0100
Subject: [PATCH 2/3] fix(state buttons): state buttons hovering styles will be
 applied instantly

---
 frontend/react/src/ui/components/olstatebutton.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index 66e96507..3f0c3153 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -21,6 +21,7 @@ export function OlStateButton(props: {
 }) {
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
+  const [isMouseHovering, setIsMouseHovering] = useState(false);
   var buttonRef = useRef(null);
 
   const className =
@@ -48,11 +49,12 @@ export function OlStateButton(props: {
         style={{
           border: props.buttonColor ? "2px solid " + props.buttonColor : "0px solid transparent",
           background: setOpacity(
-            props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
-            !props.checked && hover ? 0.3 : 1
+            props.checked || isMouseHovering ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
+            !props.checked && isMouseHovering ? 0.3 : 1
           ),
         }}
         onMouseEnter={() => {
+          setIsMouseHovering(true);
           setHoverTimeout(
             window.setTimeout(() => {
               setHover(true);
@@ -61,6 +63,7 @@ export function OlStateButton(props: {
           );
         }}
         onMouseLeave={() => {
+          setIsMouseHovering(false);
           setHover(false);
           if (hoverTimeout) {
             window.clearTimeout(hoverTimeout);

From fbc598e3aa28140e83275018e088d4105134f1c3 Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Fri, 28 Mar 2025 22:21:03 +0100
Subject: [PATCH 3/3] fix(coordinates): MGRS are now separed properly

---
 frontend/react/src/ui/components/ollocation.tsx   | 2 +-
 frontend/react/src/ui/panels/coordinatespanel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/react/src/ui/components/ollocation.tsx b/frontend/react/src/ui/components/ollocation.tsx
index f5ab162a..11845d25 100644
--- a/frontend/react/src/ui/components/ollocation.tsx
+++ b/frontend/react/src/ui/components/ollocation.tsx
@@ -29,7 +29,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
         >
           MGRS
         </span>
-        {MGRS ? MGRS.string : "Error"}
+        {MGRS ? MGRS.groups.join(" ") : "Error"}
       </div>
     );
   } else if (referenceSystem === "LatLngDec") {
diff --git a/frontend/react/src/ui/panels/coordinatespanel.tsx b/frontend/react/src/ui/panels/coordinatespanel.tsx
index f4ffa0c0..1020f89d 100644
--- a/frontend/react/src/ui/panels/coordinatespanel.tsx
+++ b/frontend/react/src/ui/panels/coordinatespanel.tsx
@@ -46,7 +46,7 @@ export function CoordinatesPanel(props: {}) {
         returnString = `${latlng.lat >= 0 ? "N" : "S"} ${DDToDDM(latlng.lat)}, ${latlng.lng >= 0 ? "E" : "W"} ${DDToDDM(latlng.lng)}`;
         break;
       case "MGRS":
-        returnString = latLngToMGRS(latlng.lat, latlng.lng, 6)?.string || "Error";
+        returnString = latLngToMGRS(latlng.lat, latlng.lng, 6)?.groups.join(" ") || "Error";
         break;
     }