Feature: validate image project

.github/workflows/actions.yml

@@ -42,15 +42,28 @@ jobs:
             exit 1;
           }
 
+    - name: Decrypt Service Account Key File
+      working-directory: ./
+      run: |
+        openssl enc -aes-256-cbc -d -K "$OPENSSL_KEY" -iv "$OPENSSL_IV" -in ci-mapswipe-firebase-adminsdk-80fzw-ebce84bd5b.json.enc -out mapswipe_workers/serviceAccountKey.json
+      env:
+        OPENSSL_PASSPHRASE: ${{ secrets.OPENSSL_PASSPHRASE }}
+        OPENSSL_KEY: ${{ secrets.OPENSSL_KEY }}
+        OPENSSL_IV: ${{ secrets.OPENSSL_IV }}
+
+    - name: Build docker images
+      run: |
+        # Create a mock file for wal-g setup
+        touch postgres/serviceAccountKey.json
+        docker compose build postgres firebase_deploy mapswipe_workers_creation django
+
     - name: Setup Postgres Database Container
       env:
         POSTGRES_PASSWORD: postgres
         POSTGRES_USER: postgres
         POSTGRES_DB: postgres
       run: |
-        # Create a mock file for wal-g setup
-        touch postgres/serviceAccountKey.json
-        docker compose up --build --detach postgres
+        docker compose up --detach postgres
         for i in {1..5}; do docker compose exec -T postgres pg_isready && s=0 && break || s=$? && sleep 5; done; (docker compose logs postgres && exit $s)
 
     - name: Deploy Firebase Rules and Functions
@@ -60,15 +73,6 @@ jobs:
       run: |
         docker compose run --rm firebase_deploy sh -c "firebase use $FIREBASE_DB && firebase deploy --token $FIREBASE_TOKEN --only database"
 
-    - name: Decrypt Service Account Key File
-      working-directory: ./
-      run: |
-        openssl enc -aes-256-cbc -d -K "$OPENSSL_KEY" -iv "$OPENSSL_IV" -in ci-mapswipe-firebase-adminsdk-80fzw-ebce84bd5b.json.enc -out mapswipe_workers/serviceAccountKey.json
-      env:
-        OPENSSL_PASSPHRASE: ${{ secrets.OPENSSL_PASSPHRASE }}
-        OPENSSL_KEY: ${{ secrets.OPENSSL_KEY }}
-        OPENSSL_IV: ${{ secrets.OPENSSL_IV }}
-
     - name: Run Tests
       working-directory: ./mapswipe_workers
       env:

community-dashboard/app/views/StatsBoard/index.tsx

@@ -43,12 +43,14 @@ import InformationCard from '#components/InformationCard';
 import areaSvg from '#resources/icons/area.svg';
 import sceneSvg from '#resources/icons/scene.svg';
 import featureSvg from '#resources/icons/feature.svg';
+import validateImageSvg from '#resources/icons/validate-image.svg';
 import {
     ContributorTimeStatType,
     OrganizationSwipeStatsType,
     ProjectTypeSwipeStatsType,
     ProjectTypeAreaStatsType,
     ContributorSwipeStatType,
+    ProjectTypeEnum,
 } from '#generated/types';
 import { mergeItems } from '#utils/common';
 import {
@@ -67,17 +69,28 @@ const CHART_BREAKPOINT = 700;
 export type ActualContributorTimeStatType = ContributorTimeStatType & { totalSwipeTime: number };
 const UNKNOWN = '-1';
 const BUILD_AREA = 'BUILD_AREA';
+const MEDIA = 'MEDIA';
+const DIGITIZATION = 'DIGITIZATION';
 const FOOTPRINT = 'FOOTPRINT';
 const CHANGE_DETECTION = 'CHANGE_DETECTION';
+const VALIDATE_IMAGE = 'VALIDATE_IMAGE';
 const COMPLETENESS = 'COMPLETENESS';
 const STREET = 'STREET';
 
 // FIXME: the name property is not used properly
-const projectTypes: Record<string, { color: string, name: string }> = {
+const projectTypes: Record<ProjectTypeEnum | '-1', { color: string, name: string }> = {
     [UNKNOWN]: {
         color: '#cacaca',
         name: 'Unknown',
     },
+    [MEDIA]: {
+        color: '#cacaca',
+        name: 'Media',
+    },
+    [DIGITIZATION]: {
+        color: '#cacaca',
+        name: 'Digitization',
+    },
     [BUILD_AREA]: {
         color: '#f8a769',
         name: 'Find',
@@ -94,6 +107,10 @@ const projectTypes: Record<string, { color: string, name: string }> = {
         color: '#fb8072',
         name: 'Completeness',
     },
+    [VALIDATE_IMAGE]: {
+        color: '#a1b963',
+        name: 'Validate Image',
+    },
     [STREET]: {
         color: '#808080',
         name: 'Street',
@@ -376,14 +393,16 @@ function StatsBoard(props: Props) {
     const sortedProjectSwipeType = useMemo(
         () => (
             swipeByProjectType
-                ?.map((item) => ({
-                    ...item,
-                    projectType: (
-                        isDefined(item.projectType)
-                        && isDefined(projectTypes[item.projectType])
-                    ) ? item.projectType
-                        : UNKNOWN,
-                }))
+                ?.map((item) => {
+                    const projectType: ProjectTypeEnum | '-1' = (
+                        isDefined(item.projectType) && isDefined(projectTypes[item.projectType])
+                    ) ? item.projectType : UNKNOWN;
+
+                    return ({
+                        ...item,
+                        projectType,
+                    });
+                })
                 .sort((a, b) => compareNumber(a.totalSwipes, b.totalSwipes, -1)) ?? []
         ),
         [swipeByProjectType],
@@ -449,6 +468,10 @@ function StatsBoard(props: Props) {
         (project) => project.projectType === FOOTPRINT,
     )?.totalSwipes;
 
+    const validateImageTotalSwipes = swipeByProjectType?.find(
+        (project) => project.projectType === VALIDATE_IMAGE,
+    )?.totalSwipes;
+
     const organizationColors = scaleOrdinal<string, string | undefined>()
         .domain(totalSwipesByOrganizationStats?.map(
             (organization) => (organization.organizationName),
@@ -699,6 +722,29 @@ function StatsBoard(props: Props) {
                         subHeading="Compare"
                         variant="stat"
                     />
+                    <InformationCard
+                        icon={(
+                            <img
+                                src={validateImageSvg}
+                                alt="group icon"
+                            />
+                        )}
+                        value={(
+                            <NumberOutput
+                                className={styles.numberOutput}
+                                value={validateImageTotalSwipes}
+                                normal
+                                invalidText={0}
+                            />
+                        )}
+                        label={(
+                            <div className={styles.infoLabel}>
+                                Images Validated
+                            </div>
+                        )}
+                        subHeading="Validate Image"
+                        variant="stat"
+                    />
                 </div>
                 <div className={styles.overallStatsContainer}>
                     <InformationCard

community-dashboard/app/views/StatsBoard/styles.css

@@ -67,7 +67,7 @@
             >* {
                 flex-basis: 0;
                 flex-grow: 1;
-                min-width: 12rem;
+                min-width: 24rem;
 
                 @media (max-width: 48rem) {
                     min-width: 100%;

community-dashboard/docker-compose.yml

@@ -2,7 +2,6 @@ version: '3.3'
 
 services:
   react:
-    build: .
     command: sh -c 'yarn install --frozen-lockfile && yarn start'
     build:
       context: ./
@@ -15,4 +14,4 @@ services:
     volumes:
       - .:/code
     ports:
-      - '3080:3080'
+      - '3081:3081'

django/Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.10-buster
+FROM python:3.10-bullseye
 
 LABEL maintainer="Mapswipe info@mapswipe.org"
 

django/apps/aggregated/management/commands/update_aggregated_data.py

@@ -55,6 +55,7 @@
               WHEN P.project_type = {Project.Type.CHANGE_DETECTION.value} THEN 11.2
               -- FOOTPRINT: Not calculated right now
               WHEN P.project_type = {Project.Type.FOOTPRINT.value} THEN 6.1
+              WHEN P.project_type = {Project.Type.VALIDATE_IMAGE.value} THEN 6.1
               WHEN P.project_type = {Project.Type.STREET.value} THEN 65
               ELSE 1
             END
@@ -111,6 +112,7 @@
               WHEN P.project_type = {Project.Type.CHANGE_DETECTION.value} THEN 11.2
               -- FOOTPRINT: Not calculated right now
               WHEN P.project_type = {Project.Type.FOOTPRINT.value} THEN 6.1
+              WHEN P.project_type = {Project.Type.VALIDATE_IMAGE.value} THEN 6.1
               WHEN P.project_type = {Project.Type.STREET.value} THEN 65
               ELSE 1
             END
@@ -136,8 +138,10 @@
             G.group_id,
             (
                 CASE
-                    -- Hide area for Footprint
+                    -- Hide area for Footprint and Validate Image
+                    -- FIXME: What should we do for Project.Type.STREET.value
                     WHEN P.project_type = {Project.Type.FOOTPRINT.value} THEN 0
+                    WHEN P.project_type = {Project.Type.VALIDATE_IMAGE.value} THEN 0
                     ELSE G.total_area
                 END
             ) as total_task_group_area,

django/apps/existing_database/models.py

@@ -69,6 +69,7 @@ class Type(models.IntegerChoices):
         MEDIA = 5, "Media"
         DIGITIZATION = 6, "Digitization"
         STREET = 7, "Street"
+        VALIDATE_IMAGE = 10, "Validate Image"
 
     project_id = models.CharField(primary_key=True, max_length=999)
     created = models.DateTimeField(blank=True, null=True)

django/schema.graphql

@@ -100,6 +100,7 @@ enum ProjectTypeEnum {
   MEDIA
   DIGITIZATION
   STREET
+  VALIDATE_IMAGE
 }
 
 type ProjectTypeSwipeStatsType {

docker-compose.tc.yaml

@@ -33,6 +33,7 @@ x-mapswipe-workers: &base_mapswipe_workers
     SLACK_CHANNEL: '${SLACK_CHANNEL}'
     SENTRY_DSN: '${SENTRY_DSN}'
     OSMCHA_API_KEY: '${OSMCHA_API_KEY}'
+    MAPILLARY_API_KEY: '${MAPILLARY_API_KEY}'
   depends_on:
     - postgres
   volumes:

manager-dashboard/app/Base/configs/projectTypes.ts

@@ -5,6 +5,7 @@ import {
     PROJECT_TYPE_CHANGE_DETECTION,
     PROJECT_TYPE_STREET,
     PROJECT_TYPE_COMPLETENESS,
+    PROJECT_TYPE_VALIDATE_IMAGE,
 } from '#utils/common';
 
 const PROJECT_CONFIG_NAME = process.env.REACT_APP_PROJECT_CONFIG_NAME as string;
@@ -15,6 +16,7 @@ const mapswipeProjectTypeOptions: {
 }[] = [
     { value: PROJECT_TYPE_BUILD_AREA, label: 'Find' },
     { value: PROJECT_TYPE_FOOTPRINT, label: 'Validate' },
+    { value: PROJECT_TYPE_VALIDATE_IMAGE, label: 'Validate Image' },
     { value: PROJECT_TYPE_CHANGE_DETECTION, label: 'Compare' },
     { value: PROJECT_TYPE_STREET, label: 'Street' },
     { value: PROJECT_TYPE_COMPLETENESS, label: 'Completeness' },

manager-dashboard/app/Base/styles.css

@@ -105,6 +105,7 @@ p {
     --height-mobile-preview-builarea-content: 30rem;
     --height-mobile-preview-footprint-content: 22rem;
     --height-mobile-preview-change-detection-content: 14rem;
+    --height-mobile-preview-validate-image-content: 22rem;
 
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;

manager-dashboard/app/components/Calendar/CalendarDate/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import RawButton, { Props as RawButtonProps } from '../../RawButton';
-import { ymdToDateString, typedMemo } from '../../../utils/common.tsx';
+import { ymdToDateString, typedMemo } from '../../../utils/common';
 
 import styles from './styles.css';
 

manager-dashboard/app/components/Calendar/index.tsx

@@ -15,7 +15,7 @@ import Button from '../Button';
 import NumberInput from '../NumberInput';
 import SelectInput from '../SelectInput';
 import useInputState from '../../hooks/useInputState';
-import { typedMemo } from '../../utils/common.tsx';
+import { typedMemo } from '../../utils/common';
 
 import CalendarDate, { Props as CalendarDateProps } from './CalendarDate';
 

manager-dashboard/app/components/CocoFileInput/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import * as t from 'io-ts';
+import { isRight } from 'fp-ts/Either';
+
+import JsonFileInput, { Props as JsonFileInputProps } from '#components/JsonFileInput';
+
+const Image = t.type({
+    id: t.number,
+    // width: t.number,
+    // height: t.number,
+    file_name: t.string,
+    // license: t.union([t.number, t.undefined]),
+    flickr_url: t.union([t.string, t.undefined]),
+    coco_url: t.union([t.string, t.undefined]),
+    // date_captured: DateFromISOString,
+});
+
+const CocoDataset = t.type({
+    // info: Info,
+    // licenses: t.array(License),
+    images: t.array(Image),
+    // annotations: t.array(Annotation),
+    // categories: t.array(Category)
+});
+export type CocoDatasetType = t.TypeOf<typeof CocoDataset>
+
+interface Props<N> extends Omit<JsonFileInputProps<N, object>, 'onChange' | 'value'> {
+    value: CocoDatasetType | undefined;
+    maxLength: number;
+    onChange: (newValue: CocoDatasetType | undefined, name: N) => void;
+}
+function CocoFileInput<N>(props: Props<N>) {
+    const {
+        name,
+        onChange,
+        error,
+        maxLength,
+        ...otherProps
+    } = props;
+
+    const [
+        internalErrorMessage,
+        setInternalErrorMessage,
+    ] = React.useState<string>();
+
+    const handleChange = React.useCallback(
+        (val) => {
+            const result = CocoDataset.decode(val);
+            if (!isRight(result)) {
+                // eslint-disable-next-line no-console
+                console.error('Invalid COCO format', result.left);
+                setInternalErrorMessage('Invalid COCO format');
+                return;
+            }
+            if (result.right.images.length > maxLength) {
+                setInternalErrorMessage(`Too many images ${result.right.images.length} uploaded. Please do not exceed ${maxLength} images.`);
+                return;
+            }
+            const uniqueIdentifiers = new Set(result.right.images.map((item) => item.id));
+            if (uniqueIdentifiers.size < result.right.images.length) {
+                setInternalErrorMessage('Each image should have a unique id.');
+                return;
+            }
+            setInternalErrorMessage(undefined);
+            onChange(result.right, name);
+        },
+        [onChange, maxLength, name],
+    );
+
+    return (
+        <JsonFileInput
+            name={name}
+            onChange={handleChange}
+            error={internalErrorMessage ?? error}
+            {...otherProps}
+        />
+    );
+}
+
+export default CocoFileInput;

manager-dashboard/app/components/DateRangeInput/index.tsx

@@ -19,7 +19,7 @@ import Button from '../Button';
 import Popup from '../Popup';
 import Calendar, { Props as CalendarProps } from '../Calendar';
 import CalendarDate, { Props as CalendarDateProps } from '../Calendar/CalendarDate';
-import { ymdToDateString, dateStringToDate } from '../../utils/common.tsx';
+import { ymdToDateString, dateStringToDate } from '../../utils/common';
 
 import {
     predefinedDateRangeOptions,