wip: mobile fixes

hotosm · Dec 26, 2024 · ca9953e · ca9953e
1 parent 2de8d29
commit ca9953e
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 102 deletions.
diff --git a/frontend/src/app/routes/start-mapping.tsx b/frontend/src/app/routes/start-mapping.tsx
@@ -303,6 +303,14 @@ export const StartMappingPage = () => {
     setShowModelDetailsPopup((prev) => !prev);
   }, [setShowModelDetailsPopup]);
 
+  const clearPredictions = useCallback(() => {
+    setModelPredictions(({
+      accepted: [],
+      rejected: [],
+      all: []
+    }))
+  }, [setModelPredictions]);
+
   return (
     <>
       <Head title={startMappingPageContent.pageTitle(data?.name)} />
@@ -320,6 +328,7 @@ export const StartMappingPage = () => {
           query={query}
           updateQuery={updateQuery}
           modelDetailsPopupIsActive={showModelDetailsPopup}
+          clearPredictions={clearPredictions}
         />
         <div className="sticky top-0 bg-white z-10 px-4 xl:px-large py-1 hidden md:block">
           {/* Model Details Popup */}
@@ -352,10 +361,11 @@ export const StartMappingPage = () => {
             modelDetailsPopupIsActive={showModelDetailsPopup}
             handleModelDetailsPopup={handleModelDetailsPopup}
             downloadOptions={downloadOptions}
+            clearPredictions={clearPredictions}
           />
         </div>
         <div className="col-span-12 h-[70vh] md:h-full md:border-8 md:border-off-white flex-grow relative map-elements-z-index">
-          {/* Mobile Header and Controls */}
+          {/* Mobile Header and Map Controls */}
           <div className="md:hidden">
             <div className="absolute top-4 right-4  z-[10]">
               <UserProfile hideFullName />
@@ -367,19 +377,22 @@ export const StartMappingPage = () => {
                 isOpened={dropdownIsOpened}
               />
             </div>
-            <div className="absolute top-16 right-4 z-[1] flex flex-col gap-y-2 items-end">
+            <div className="absolute top-[10vh] right-4 z-[2] flex flex-col gap-y-4 items-end">
               <ZoomLevel currentZoom={currentZoom} />
               <LayerControl
                 layers={mapLayers}
                 map={map}
-                openAerialMap={true}
+                openAerialMap
                 basemaps
               />
             </div>
-            <div className="absolute bottom-48 right-4 z-[1]">
+            <div className="absolute bottom-[30vh] flex flex-col gap-y-4 right-4 z-[1] items-end">
               <FitToBounds bounds={oamTileJSON?.bounds} map={map} />
+              <div>
+                {map && modelPredictionsExist && <Legend map={map} />}
+              </div>
             </div>
-            {map && modelPredictionsExist && <Legend map={map} />}
+
           </div>
           {/* Map Component */}
           <StartMappingMapComponent

diff --git a/frontend/src/components/map/controls/current-zoom-control.tsx b/frontend/src/components/map/controls/current-zoom-control.tsx
@@ -1,6 +1,6 @@
 export const ZoomLevel = ({ currentZoom }: { currentZoom: number }) => {
   return (
-    <div className="bg-white py-1 px-3 rounded-lg border border-gray-border md:border-0">
+    <div className="bg-white py-1.5 px-3 rounded-lg border border-gray-border md:border-0">
       <p className="text-body-4 md:text-body-3">Zoom level: {currentZoom}</p>
     </div>
   );

diff --git a/frontend/src/components/map/controls/fit-to-bounds-control.tsx b/frontend/src/components/map/controls/fit-to-bounds-control.tsx
@@ -22,7 +22,7 @@ export const FitToBounds = ({
   return (
     <ToolTip content={mapContents.controls.fitToBounds.tooltip}>
       <button
-        className={`bg-white  ${isSmallViewport ? "rounded-xl p-2 border border-gray-border md:border-0" : "p-1.5"}`}
+        className={`bg-white  ${isSmallViewport ? "rounded-xl p-2.5 border border-gray-border md:border-0" : "p-1.5"}`}
         onClick={fitToBounds}
       >
         <ArrowMoveIcon className="icon-lg" />

diff --git a/frontend/src/components/map/controls/layer-control.tsx b/frontend/src/components/map/controls/layer-control.tsx
@@ -40,12 +40,12 @@ export const LayerControl = ({
     ];
     const baseLayers: TBasemaps = basemaps
       ? [
-          { value: BASEMAPS.OSM, subLayer: OSM_BASEMAP_LAYER_ID },
-          {
-            value: BASEMAPS.GOOGLE_SATELLITE,
-            subLayer: GOOGLE_SATELLITE_BASEMAP_LAYER_ID,
-          },
-        ]
+        { value: BASEMAPS.OSM, subLayer: OSM_BASEMAP_LAYER_ID },
+        {
+          value: BASEMAPS.GOOGLE_SATELLITE,
+          subLayer: GOOGLE_SATELLITE_BASEMAP_LAYER_ID,
+        },
+      ]
       : [];
     return { layers_, baseLayers };
   }, [layers, openAerialMap, basemaps]);
@@ -136,7 +136,7 @@ export const LayerControl = ({
         disableCheveronIcon
         triggerComponent={
           <div
-            className={`bg-white p-2 border border-gray-border md:border-0 relative ${isTablet || isMobile ? "rounded-xl" : ""}`}
+            className={`bg-white p-2.5 border border-gray-border md:border-0 relative ${isTablet || isMobile ? "rounded-xl" : ""}`}
           >
             <LayerStackIcon className="icon-lg" />
           </div>

diff --git a/frontend/src/components/map/layers/tile-boundaries.tsx b/frontend/src/components/map/layers/tile-boundaries.tsx
@@ -17,7 +17,7 @@ export const TileBoundaries = ({ map }: { map: Map | null }) => {
         source: TILE_BOUNDARY_SOURCE_ID,
         paint: {
           "line-color": "#FFF",
-          "line-width": 1,
+          "line-width": 0.5,
         },
         layout: { visibility: "visible" },
       },

diff --git a/frontend/src/components/ui/drawer/mobile-drawer.tsx b/frontend/src/components/ui/drawer/mobile-drawer.tsx
@@ -8,18 +8,20 @@ export const MobileDrawer = ({
   dialogTitle,
   canClose = false,
   closeDrawer,
-  startingSnapPoint = "150px",
+  snapPoints = [0.2, 0.4, 0.8]
 }: {
   open: boolean;
   children: React.ReactNode;
   dialogTitle: string;
   closeDrawer?: () => void;
   canClose?: boolean;
   startingSnapPoint?: number | string;
+  snapPoints?: number[]
 }) => {
-  const snapPoints = [startingSnapPoint, "355px", 0.8];
 
   const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);
+  const lastSnapPoint = snapPoints[snapPoints.length - 1];
+
 
   return (
     <Drawer.Root
@@ -28,6 +30,7 @@ export const MobileDrawer = ({
       setActiveSnapPoint={setSnap}
       open={open}
       onClose={closeDrawer}
+      repositionInputs={false}
     >
       <Drawer.Overlay className="fixed inset-0 bg-black/40" />
       <Drawer.Portal>
@@ -37,15 +40,14 @@ export const MobileDrawer = ({
         >
           {canClose ? (
             <Drawer.Close
-              className="flex w-full justify-end text-body-2 app-padding"
+              className="w-full flex justify-end app-padding"
               onClick={closeDrawer}
             >
-              &#x2715;
+              <span className="text-body-2 text-gray icon-interaction w-fit py-1 px-2.5 rounded-full"> &#x2715;</span>
             </Drawer.Close>
           ) : null}
           <Drawer.Title
             hidden
-            className="text-center py-2 text-body-3 font-semibold"
           >
             {dialogTitle}
           </Drawer.Title>
@@ -56,10 +58,10 @@ export const MobileDrawer = ({
           />
           <div
             className={cn(
-              "flex flex-col max-w-md mx-auto w-full max-h-[70vh] my-4",
+              `flex flex-col max-w-md mx-auto w-full h-full max-h-[70vh] pb-8`,
               {
-                "overflow-y-auto": snap === 0.8,
-                "overflow-hidden": snap !== 0.8,
+                "overflow-y-auto": snap === lastSnapPoint,
+                "overflow-hidden": snap !== lastSnapPoint,
               },
             )}
           >

diff --git a/frontend/src/constants/ui-contents/start-mapping-content.ts b/frontend/src/constants/ui-contents/start-mapping-content.ts
@@ -9,7 +9,6 @@ export const startMappingPageContent: TStartMappingPageContent = {
       },
       legendControl: {
         title: "Legend",
-        tooltip: "Legend",
         acceptedPredictions: "Accepted Predictions",
         rejectedPredictions: "Rejected Predictions",
         predictionResults: "Prediction Results",

diff --git a/frontend/src/features/models/components/model-details-popup.tsx b/frontend/src/features/models/components/model-details-popup.tsx
@@ -133,14 +133,17 @@ const ModelDetailsPopUp = ({
         open={showPopup}
         dialogTitle="Model Details"
         closeDrawer={closeMobileDrawer}
-        startingSnapPoint={0.7}
+        snapPoints={[0.5, 0.8]}
         canClose
       >
-        <div className={`p-2 overflow-y-auto flex flex-col`}>
+        <div className={`app-padding flex flex-col`}>
           {!model && isError ? (
             <div>{startMappingPageContent.modelDetails.error}</div>
           ) : (
             <div className="flex flex-col gap-y-4 text-dark">
+              <p className="font-semibold">
+                {startMappingPageContent.modelDetails.label}
+              </p>
               {popupContent}
             </div>
           )}
@@ -157,7 +160,7 @@ const ModelDetailsPopUp = ({
       distance={40}
     >
       <div
-        className={`border bg-white border-gray-border shadown-sm rounded-xl w-[350px] scrollable p-7 max-h-[400px] overflow-y-auto flex flex-col`}
+        className={`border bg-white border-gray-border shadown-sm rounded-xl w-[350px] scrollable p-5 max-h-[400px] overflow-y-auto flex flex-col`}
       >
         {!model && isError ? (
           <div>{startMappingPageContent.modelDetails.error}</div>

diff --git a/frontend/src/features/start-mapping/components/header.tsx b/frontend/src/features/start-mapping/components/header.tsx
@@ -34,6 +34,7 @@ const StartMappingHeader = ({
   handleModelDetailsPopup,
   modelDetailsPopupIsActive,
   downloadOptions,
+  clearPredictions
 }: {
   modelPredictionsExist: boolean;
   trainingDatasetIsPending: boolean;
@@ -50,6 +51,7 @@ const StartMappingHeader = ({
   handleModelDetailsPopup: () => void;
   modelDetailsPopupIsActive: boolean;
   downloadOptions: TDownloadOptions;
+  clearPredictions: () => void
 }) => {
   const { onDropdownHide, onDropdownShow, dropdownIsOpened } =
     useDropdownMenu();
@@ -72,11 +74,10 @@ const StartMappingHeader = ({
           <div className="flex flex-col md:flex-row md:items-center gap-x-4 z-10">
             <p
               title={data?.name}
-              className="text-dark text-body-2base text-nowrap truncate md:max-w-[90px] lg:max-w-[250px] xl:max-w-[400px]"
+              className="text-dark text-body-2base text-nowrap truncate md:max-w-[20px] lg:max-w-[300px] xl:max-w-[400px]"
             >
               {data?.name ?? "N/A"}
             </p>
-
             <ModelDetailsButton
               onClick={handleModelDetailsPopup}
               modelDetailsPopupIsActive={modelDetailsPopupIsActive}
@@ -87,7 +88,7 @@ const StartMappingHeader = ({
         <div className="flex flex-row items-center gap-x-4">
           <ModelSettings updateQuery={updateQuery} query={query} />
           <div className="flex flex-row items-center gap-y-3">
-            <ModelPredictionsTracker modelPredictions={modelPredictions} />
+            <ModelPredictionsTracker modelPredictions={modelPredictions} clearPredictions={clearPredictions} />
             <DropDown
               placement="top-end"
               disableCheveronIcon

diff --git a/frontend/src/features/start-mapping/components/map/legend-control.tsx b/frontend/src/features/start-mapping/components/map/legend-control.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { LegendBookIcon } from "@/components/ui/icons";
 import { LEGEND_NAME_MAPPING, MAP_STYLES_PREFIX } from "@/utils";
 import { Map } from "maplibre-gl";
 import useScreenSize from "@/hooks/use-screen-size";
-import { ToolTip } from "@/components/ui/tooltip";
+
 import { startMappingPageContent } from "@/constants";
 
 const FillLegendStyle = ({
@@ -27,20 +27,14 @@ const FillLegendStyle = ({
 export const Legend = ({ map }: { map: Map | null }) => {
   const [expandLegend, setExpandLegend] = useState<boolean>(true);
 
-  const activeFillLayers = useMemo(() => {
-    if (!map?.getStyle()?.layers) return [];
-    return (
-      map
-        .getStyle()
-        .layers?.filter(
-          (layer) =>
-            layer.id.includes(MAP_STYLES_PREFIX) &&
-            layer.layout?.visibility === "visible" &&
-            layer.type === "fill",
-        )
-        .reverse() || []
-    );
-  }, [map]);
+  const activeFillLayers = map?.getStyle()
+    .layers?.filter(
+      (layer) =>
+        layer.id.includes(MAP_STYLES_PREFIX) &&
+        layer.layout?.visibility === "visible" &&
+        layer.type === "fill",
+    )
+    .reverse() || []
 
   const handleToggleExpand = useCallback(() => {
     setExpandLegend((prev) => !prev);
@@ -49,47 +43,44 @@ export const Legend = ({ map }: { map: Map | null }) => {
   const { isSmallViewport } = useScreenSize();
 
   return (
-    <ToolTip
-      content={startMappingPageContent.map.controls.legendControl.tooltip}
+    <button
+      disabled={!activeFillLayers}
+      className={`flex items-center gap-x-4 bg-white p-2.5 ${isSmallViewport ? "rounded-xl border border-gray-border" : "absolute flex-col gap-y-4 left-3 bottom-3 rounded-[4px] border border-gray-border"}`}
+      onClick={handleToggleExpand}
     >
-      <button
-        className={` flex items-center gap-x-4 ${isSmallViewport ? "right-4 bottom-36 rounded-xl border border-gray-border md:border-0 p-2" : "p-3 flex-col gap-y-4 left-3 bottom-3 rounded-[4px] border border-gray-border"} absolute z-[1] bg-white`}
-        onClick={handleToggleExpand}
-      >
-        {!expandLegend && isSmallViewport && (
-          <LegendBookIcon className="icon-lg" />
-        )}
+      {!expandLegend && isSmallViewport && (
+        <LegendBookIcon className="icon-lg" />
+      )}
+      {!isSmallViewport && (
+        <p className="w-full text-dark font-semibold text-body-2base flex items-center gap-x-10 justify-between">
+          {startMappingPageContent.map.controls.legendControl.title}
+          <LegendBookIcon className="icon" />
+        </p>
+      )}
+      {expandLegend && activeFillLayers ? (
+        <div
+          className={`flex  w-full ${isSmallViewport ? "flex-row gap-x-2" : "flex-col"} gap-y-3`}
+        >
+          {activeFillLayers?.map((layer, id) => (
+            <p
+              className="w-full flex items-center text-dark gap-x-2 text-body-4 md:text-body-3 text-nowrap"
+              key={id}
+            >
+              {layer.type === "fill" ? (
+                <FillLegendStyle
+                  fillColor={layer.paint?.["fill-color"] as string}
+                  fillOpacity={layer.paint?.["fill-opacity"] as number}
+                />
+              ) : null}
+              {LEGEND_NAME_MAPPING[layer.id]}
+            </p>
+          ))}
+        </div>
+      ) : null}
+      {expandLegend && isSmallViewport ? (
+        <LegendBookIcon className="icon-lg" />
+      ) : null}
+    </button>
 
-        {!isSmallViewport && (
-          <p className="w-full text-dark font-semibold text-body-2base flex items-center gap-x-10 justify-between">
-            {startMappingPageContent.map.controls.legendControl.title}
-            <LegendBookIcon className="icon" />
-          </p>
-        )}
-        {expandLegend ? (
-          <div
-            className={`flex  w-full ${isSmallViewport ? "flex-row gap-x-2" : "flex-col"} gap-y-3`}
-          >
-            {activeFillLayers?.map((layer, id) => (
-              <p
-                className="w-full flex items-center text-dark gap-x-2 text-body-4 md:text-body-3 text-nowrap"
-                key={id}
-              >
-                {layer.type === "fill" ? (
-                  <FillLegendStyle
-                    fillColor={layer.paint?.["fill-color"] as string}
-                    fillOpacity={layer.paint?.["fill-opacity"] as number}
-                  />
-                ) : null}
-                {LEGEND_NAME_MAPPING[layer.id]}
-              </p>
-            ))}
-          </div>
-        ) : null}
-        {expandLegend && isSmallViewport && (
-          <LegendBookIcon className="icon-lg" />
-        )}
-      </button>
-    </ToolTip>
   );
 };