From 66ed8a62c139db9fc3c09d591a239f6a8d97bc7b Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Thu, 25 Jan 2024 14:11:30 +0545
Subject: [PATCH 1/4] Remove `Footer` & `Organization Banner` in `Live
 Monitoring`

- Related to #6219
---
 frontend/src/components/footer/index.js     |  1 +
 frontend/src/views/projectLiveMonitoring.js | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/frontend/src/components/footer/index.js b/frontend/src/components/footer/index.js
index b38155e802..e0da9ddb06 100644
--- a/frontend/src/components/footer/index.js
+++ b/frontend/src/components/footer/index.js
@@ -38,6 +38,7 @@ export function Footer() {
     'projects/:id/tasks',
     'projects/:id/map',
     'projects/:id/validate',
+    'projects/:id/live',
     'manage/organisations/new/',
     'manage/teams/new',
     'manage/campaigns/new',
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index e0e7d588c8..a111c299c5 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -10,6 +10,7 @@ import {
   UnderpassValidationStats,
 } from '@hotosm/underpass-ui';
 import { Link } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 
 import { ProjectVisibilityBox } from '../components/projectDetail/visibilityBox';
 import { ProjectStatusBox } from '../components/projectDetail/statusBox';
@@ -89,6 +90,7 @@ const mappingTypesFeatureTypes = {
 
 export function ProjectLiveMonitoring() {
   const { id } = useParams();
+  const dispatch = useDispatch();
   const [coords, setCoords] = useState([0, 0]);
   const [activeFeature, setActiveFeature] = useState(null);
   const [tags, setTags] = useState('building');
@@ -170,6 +172,14 @@ export function ProjectLiveMonitoring() {
     }
   }, [project]);
 
+  // set organization bar visibility to false
+  useEffect(() => {
+    dispatch({ type: 'SET_VISIBILITY', isVisible: false });
+    return () => {
+      dispatch({ type: 'SET_VISIBILITY', isVisible: true });
+    };
+  }, [dispatch]);
+
   const hottheme = HOTTheme();
 
   const defaultMapStyle = {

From c1a294f0ee1ace2a6f7db1fd410862a4951f2d35 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Thu, 25 Jan 2024 14:12:30 +0545
Subject: [PATCH 2/4] Adjust `Live Monitoring` view to fit screen view

- Related to #6219
---
 frontend/src/views/projectLiveMonitoring.css | 4 ++--
 frontend/src/views/projectLiveMonitoring.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.css b/frontend/src/views/projectLiveMonitoring.css
index 1767519aab..96a48c9add 100644
--- a/frontend/src/views/projectLiveMonitoring.css
+++ b/frontend/src/views/projectLiveMonitoring.css
@@ -1,7 +1,7 @@
-@import "@hotosm/underpass-ui/dist/index.css";
+@import '@hotosm/underpass-ui/dist/index.css';
 
 .maplibregl-map {
-  height: 100vh;
+  height: calc(100vh - 6.05rem);
 }
 
 .top {
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index a111c299c5..d76a91d4fb 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -226,7 +226,7 @@ export function ProjectLiveMonitoring() {
       ready={!error && !loading}
       className="pr3"
     >
-      <div>
+      <div className="cf w-100" style={{ height: 'calc(100vh - 5.5rem)' }}>
         <div className="flex p-2">
           <div style={{ flex: 2 }}>
             <div className="top">
@@ -365,7 +365,7 @@ export function ProjectLiveMonitoring() {
               style={{
                 display: 'flex',
                 flexFlow: 'column',
-                height: '100px',
+                maxHeight: 'calc(100vh - 26rem)',
                 flex: '1 1 auto',
               }}
               tags={tags}

From 9c5e4f151642e2f608999a07975e2f14cbca9a0d Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Mon, 29 Jan 2024 15:32:15 +0545
Subject: [PATCH 3/4] Fix `Live Monitoring` design issues

- Related to #6219
---
 frontend/src/views/projectLiveMonitoring.css | 22 ++++++++++++++++++--
 frontend/src/views/projectLiveMonitoring.js  | 18 +++++++++-------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.css b/frontend/src/views/projectLiveMonitoring.css
index 96a48c9add..d5d8915313 100644
--- a/frontend/src/views/projectLiveMonitoring.css
+++ b/frontend/src/views/projectLiveMonitoring.css
@@ -6,8 +6,8 @@
 
 .top {
   position: absolute;
-  top: 150px;
-  left: 20px;
+  top: 0.625rem;
+  left: 0.625rem;
   z-index: 999;
 }
 
@@ -17,3 +17,21 @@ svg.pl2 {
   width: 19px !important;
   margin-left: 0px;
 }
+
+.react-select__control {
+  border-radius: 0.25rem !important;
+  min-height: 36px !important;
+  width: 15.8rem;
+}
+
+.react-select__menu {
+  width: 15.8rem !important;
+}
+
+.title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index d76a91d4fb..188ef00a4e 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -227,16 +227,17 @@ export function ProjectLiveMonitoring() {
       className="pr3"
     >
       <div className="cf w-100" style={{ height: 'calc(100vh - 5.5rem)' }}>
-        <div className="flex p-2">
-          <div style={{ flex: 2 }}>
+        <div className="flex p-2" style={{ gap: '0.685rem' }}>
+          <div style={{ flex: 2, position: 'relative' }}>
             <div className="top">
               <form>
                 <input
-                  className="border px-2 py-2 text-sm"
+                  className="border px-2 py-2 text-sm rounded"
                   type="text"
                   placeholder="key (ex: building=yes)"
                   ref={tagsInputRef}
                   defaultValue="building"
+                  style={{ height: '36px' }}
                 />
                 &nbsp;
                 <button
@@ -284,21 +285,21 @@ export function ProjectLiveMonitoring() {
             {project && (
               <>
                 <div className="flex flex-column flex-row-ns justify-start justify-between-ns items-start items-center-ns flex-wrap">
-                  <div className="pt2">
+                  <div className="pt2 title-text">
                     <span className="blue-light">
                       <Link to={`/projects/${project.projectId}`} className="no-underline pointer">
                         <span className="blue-light">#{project.projectId}</span>
                       </Link>
                     </span>
                     {project.organisationName ? (
-                      <span className="blue-dark"> | {project.organisationName}</span>
+                      <span className="blue-dark"> | {project.organisationName} </span>
                     ) : null}
                   </div>
                 </div>
                 <div className="w-100 fl pv1 bg-white blue-dark">
                   <div>
                     <h3
-                      className="f2 fw5 ttu barlow-condensed blue-dark dib mr3"
+                      className="f2 fw5 ttu barlow-condensed blue-dark dib title-text"
                       lang={project.projectInfo.locale}
                     >
                       {project.projectInfo && project.projectInfo.name}
@@ -365,8 +366,9 @@ export function ProjectLiveMonitoring() {
               style={{
                 display: 'flex',
                 flexFlow: 'column',
-                maxHeight: 'calc(100vh - 26rem)',
+                height: '8px',
                 flex: '1 1 auto',
+                overflowY: 'auto',
               }}
               tags={tags}
               hashtag={'hotosm-project-' + id}
@@ -381,7 +383,7 @@ export function ProjectLiveMonitoring() {
               }}
               realtime={realtimeList}
               config={config}
-              status={listAll ? "" : status}
+              status={listAll ? '' : status}
               orderBy="created_at"
               onFetchFirstTime={(mostRecentFeature) => {
                 if (mostRecentFeature) {

From c9e9b1921d57c34e2abc2b87d83904934a23e870 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Wed, 14 Feb 2024 09:56:28 +0545
Subject: [PATCH 4/4] Upgrade `@hotosm/underpass-ui` package

---
 frontend/yarn.lock | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 40401fef86..7688675a10 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1772,7 +1772,7 @@
 
 "@hotosm/underpass-ui@https://github.com/hotosm/underpass-ui.git":
   version "0.0.3"
-  resolved "https://github.com/hotosm/underpass-ui.git#e4e37ad96134d430e8ba30025249c49bd8c24c88"
+  resolved "https://github.com/hotosm/underpass-ui.git#61a2d9f9e8d3ed60b6f32121b61e8c8e243750ce"
   dependencies:
     autoprefixer "^9"
     maplibre-gl "^3.3.1"
@@ -5404,7 +5404,7 @@ check-types@^11.1.1:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.2.tgz#7afc0b6a860d686885062f2dba888ba5710335b4"
   integrity sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1, chokidar@^3.4.2:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -5438,6 +5438,21 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.5.2:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -8467,9 +8482,9 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     minimalistic-assert "^1.0.1"
 
 hasown@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
-  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.1.tgz#26f48f039de2c0f8d3356c223fb8d50253519faa"
+  integrity sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==
   dependencies:
     function-bind "^1.1.2"
 
@@ -13137,9 +13152,9 @@ postcss@^8.1.0:
     source-map-js "^1.0.2"
 
 postcss@^8.3.5:
-  version "8.4.33"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
-  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  version "8.4.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
   dependencies:
     nanoid "^3.3.7"
     picocolors "^1.0.0"