Feature/live monitoring

.circleci/config.yml

@@ -22,7 +22,7 @@ jobs:
           command: |
             yarn --version
             cd ${CIRCLE_WORKING_DIRECTORY}/frontend
-            yarn install
+            yarn install --network-concurrency 1 # lodash which has prepare script fails. Hotfix: https://github.com/yarnpkg/yarn/issues/6312
       - save_cache:
           key: yarn-deps-{{ checksum "frontend/yarn.lock" }}
           paths:

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: hotosm
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

example.env

@@ -204,8 +204,12 @@ TM_DEFAULT_LOCALE=en
 # Sentry.io DSN Config (optional)
 # TM_SENTRY_BACKEND_DSN=https://foo.ingest.sentry.io/1234567
 # TM_SENTRY_FRONTEND_DSN=https://bar.ingest.sentry.io/8901234
+#
+
+# Underpass API URL (for project live monitoring feature)
+UNDERPASS_URL=https://underpass.hotosm.org
 
 
 EXPORT TOOL Integration with 0(Disable) and 1(Enable) and S3 URL for Export Tool
 #EXPORT_TOOL_S3_URL=https://foorawdataapi.s3.amazonaws.com
-#ENABLE_EXPORT_TOOL=0
+#ENABLE_EXPORT_TOOL=0

frontend/package.json

@@ -10,15 +10,16 @@
     "@formatjs/macro": "^0.2.8",
     "@hotosm/id": "^2.21.1",
     "@hotosm/iso-countries-languages": "^1.1.2",
+    "@hotosm/underpass-ui": "https://github.com/hotosm/underpass-ui.git",
     "@mapbox/mapbox-gl-draw": "^1.4.1",
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@placemarkio/geo-viewport": "^1.0.1",
     "@rapideditor/rapid": "^2.1.1",
     "@sentry/react": "^7.60.1",
-    "@tmcw/togeojson": "^4.7.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
+    "@tmcw/togeojson": "^4.7.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",

frontend/src/api/projects.js

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { subMonths, format } from 'date-fns';
 import { useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
@@ -187,6 +188,18 @@ export const submitValidationTask = (projectId, payload, token, locale) => {
   );
 };
 
+export const useAvailableCountriesQuery = () => {
+  const fetchGeojsonData = () => {
+    return axios.get(`https://underpass.live/availability.json`);
+  };
+
+  return useQuery({
+    queryKey: ['priority-geojson'],
+    queryFn: fetchGeojsonData,
+    select: (res) => res.data,
+  });
+};
+
 const backendToQueryConversion = {
   difficulty: 'difficulty',
   campaign: 'campaign',

frontend/src/components/projectDetail/index.js

@@ -21,8 +21,13 @@ import { PermissionBox } from './permissionBox';
 import { CustomButton } from '../button';
 import { ProjectInfoPanel } from './infoPanel';
 import { OSMChaButton } from './osmchaButton';
+import { LiveViewButton } from './liveViewButton';
 import { useSetProjectPageTitleTag } from '../../hooks/UseMetaTags';
-import { useProjectContributionsQuery, useProjectTimelineQuery } from '../../api/projects';
+import {
+  useProjectContributionsQuery,
+  useProjectTimelineQuery,
+  useAvailableCountriesQuery,
+} from '../../api/projects';
 import { Alert } from '../alert';
 
 import './styles.scss';
@@ -153,6 +158,16 @@ export const ProjectDetail = (props) => {
     </Link>
   );
 
+  const { data } = useAvailableCountriesQuery();
+
+  // check if the project has live monitoring feature enabled
+  // based on the country list provided by available.json
+  const hasLiveMonitoringFeature = !data
+    ? false
+    : props.project.countryTag.some((country) =>
+        data.countries.some((item) => country.toLowerCase() === item.toLowerCase()),
+      );
+
   return (
     <div className={`${props.className || 'blue-dark'}`}>
       <div className="db flex-l tasks-map-height">
@@ -346,6 +361,15 @@ export const ProjectDetail = (props) => {
             project={props.project}
             className="bg-white blue-dark ba b--grey-light pa3"
           />
+
+          {/* show live view button only when the project has live monitoring feature */}
+          {hasLiveMonitoringFeature && (
+            <LiveViewButton
+              projectId={props.project.projectId}
+              className="bg-white blue-dark ba b--grey-light pa3"
+            />
+          )}
+
           <DownloadAOIButton
             projectId={props.project.projectId}
             className="bg-white blue-dark ba b--grey-light pa3"

frontend/src/components/projectDetail/liveViewButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+import { CustomButton } from '../button';
+
+export const LiveViewButton = ({ projectId, className, compact = false }) => (
+  <Link to={`/projects/${projectId}/live`} className="pr2">
+    {
+      <CustomButton className={className}>
+        {compact ? (
+          <FormattedMessage {...messages.live} />
+        ) : (
+          <FormattedMessage {...messages.liveMonitoring} />
+        )}
+      </CustomButton>
+    }
+  </Link>
+);

frontend/src/components/projectDetail/messages.js

@@ -240,6 +240,14 @@ export default defineMessages({
     id: 'project.detail.sections.contributions.osmcha',
     defaultMessage: 'Changesets in OSMCha',
   },
+  live: {
+    id: 'project.detail.sections.contributions.live',
+    defaultMessage: 'Live',
+  },
+  liveMonitoring: {
+    id: 'project.detail.sections.contributions.liveMonitoring',
+    defaultMessage: 'Live monitoring',
+  },
   changesets: {
     id: 'project.detail.sections.contributions.changesets',
     defaultMessage: 'Changesets',

frontend/src/config/index.js

@@ -6,6 +6,7 @@ export const API_URL = process.env.REACT_APP_API_URL
 export const OHSOME_STATS_BASE_URL =
   process.env.REACT_APP_OHSOME_STATS_BASE_URL || 'https://stats.now.ohsome.org/api';
 export const OHSOME_STATS_TOKEN = process.env.REACT_APP_OHSOME_STATS_TOKEN || '';
+export const UNDERPASS_URL = process.env.UNDERPASS_URL || 'https://underpass.hotosm.org';
 
 // APPLICATION SETTINGS
 export const DEFAULT_LOCALE = process.env.REACT_APP_DEFAULT_LOCALE || 'en';

frontend/src/routes.js

@@ -90,6 +90,16 @@ export const router = createBrowserRouter(
         }}
         ErrorBoundary={FallbackComponent}
       />
+      <Route
+        path="projects/:id/live"
+        lazy={async () => {
+          const { ProjectLiveMonitoring } = await import(
+            './views/projectLiveMonitoring' /* webpackChunkName: "projectLiveMonitoring" */
+          );
+          return { Component: ProjectLiveMonitoring };
+        }}
+        ErrorBoundary={FallbackComponent}
+      />
       <Route
         path="organisations/:id/stats/"
         lazy={async () => {

frontend/src/views/projectLiveMonitoring.css

@@ -0,0 +1,13 @@
+@import "@hotosm/underpass-ui/dist/index.css";
+
+.maplibregl-map {
+  height: 100vh;
+}
+
+.top {
+  position: absolute;
+  top: 390px;
+  left: 20px;
+  z-index: 999;
+}
+