fix(frontend): project details improve UI responsiveness (#1321)

* fix projectDetails: UI scrollbar fix * fix map: cursor pointer on feature hover * fix taskSubmissionMap: only open popup if tasks length is more than 0
hotosm · Mar 4, 2024 · 7e267b4 · 7e267b4
1 parent 5cd836f
commit 7e267b4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js
@@ -360,6 +360,24 @@ const VectorLayer = ({
     vectorLayer.setProperties(layerProperties);
   }, [map, vectorLayer, layerProperties]);
 
+  useEffect(() => {
+    if (!map) return;
+    map.on('pointermove', function (e) {
+      const pixel = map.getEventPixel(e.originalEvent);
+      const features = map.getFeaturesAtPixel(pixel);
+      if (features.length > 0) {
+        document.getElementById('ol-map').style.cursor = 'pointer';
+      } else {
+        document.getElementById('ol-map').style.cursor = 'default';
+      }
+    });
+
+    // Clean up
+    return () => {
+      map.setTarget(null);
+    };
+  }, [map]);
+
   // style on hover
   useEffect(() => {
     if (!map) return null;

diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx
@@ -22,22 +22,22 @@ const ProjectInfo = () => {
   }, [projectInfo, paraRef.current]);
 
   return (
-    <div className="fmtm-flex fmtm-flex-col fmtm-gap-5 fmtm-mt-3 fmtm-h-[56vh] fmtm-overflow-y-scroll scrollbar fmtm-pr-1">
+    <div className="fmtm-flex fmtm-flex-col fmtm-gap-5 fmtm-mt-3  fmtm-h-[50vh] fmtm-overflow-y-scroll scrollbar fmtm-pr-1">
       <div>
         <p className="fmtm-font-bold">Description</p>
         {projectDetailsLoading ? (
           <div>
-            {Array.from({ length: 10 }).map((i) => (
+            {Array.from({ length: 7 }).map((i) => (
               <CoreModules.Skeleton key={i} />
             ))}
             <CoreModules.Skeleton className="!fmtm-w-[80px]" />
           </div>
         ) : (
           <div>
-            <p className={`${!seeMore ? 'fmtm-line-clamp-[10]' : ''} fmtm-text-[#706E6E]`} ref={paraRef}>
+            <p className={`${!seeMore ? 'fmtm-line-clamp-[7]' : ''} fmtm-text-[#706E6E]`} ref={paraRef}>
               {projectInfo?.description}
             </p>
-            {descLines >= 10 && (
+            {descLines >= 7 && (
               <p
                 className="fmtm-text-primaryRed hover:fmtm-text-red-700 hover:fmtm-cursor-pointer"
                 onClick={() => setSeeMore(!seeMore)}

diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx
@@ -217,17 +217,18 @@ const TaskSubmissionsMap = () => {
 
   const taskSubmissionsPopupUI = (properties: taskFeaturePropertyType) => {
     const currentTask = taskInfo?.filter((task) => +task.task_id === properties.uid);
+    if (currentTask?.length === 0) return;
     return (
       <div className="fmtm-h-fit">
         <h2 className="fmtm-border-b-[2px] fmtm-border-primaryRed fmtm-w-fit fmtm-pr-1">
-          Task ID: #{currentTask?.[0].task_id}
+          Task ID: #{currentTask?.[0]?.task_id}
         </h2>
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-1 fmtm-mt-1">
           <p>
-            Expected Count: <span className="fmtm-text-primaryRed">{currentTask?.[0].feature_count}</span>
+            Expected Count: <span className="fmtm-text-primaryRed">{currentTask?.[0]?.feature_count}</span>
           </p>
           <p>
-            Submission Count: <span className="fmtm-text-primaryRed">{currentTask?.[0].submission_count}</span>
+            Submission Count: <span className="fmtm-text-primaryRed">{currentTask?.[0]?.submission_count}</span>
           </p>
         </div>
       </div>
@@ -284,7 +285,7 @@ const TaskSubmissionsMap = () => {
             collapsed={true}
           />
         </div>
-        <AsyncPopup map={map} popupUI={taskSubmissionsPopupUI} />
+        {taskInfo?.length > 0 && <AsyncPopup map={map} popupUI={taskSubmissionsPopupUI} />}
         {dataExtractUrl && isValidUrl(dataExtractUrl) && (
           <VectorLayer fgbUrl={dataExtractUrl} fgbExtent={dataExtractExtent} zIndex={15} />
         )}