Feature: validate image project

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,

manager-dashboard/app/components/InputSection/styles.css

@@ -24,7 +24,7 @@
         display: flex;
         flex-direction: column;
         border-radius: var(--radius-card-border);
-        gap: var(--spacing-extra-large);
+        gap: var(--spacing-large);
         background-color: var(--color-foreground);
         padding: var(--spacing-large);
         min-height: 14rem;

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

@@ -23,7 +23,7 @@ function readUploadedFileAsText(inputFile: File) {
 const ONE_MB = 1024 * 1024;
 const DEFAULT_MAX_FILE_SIZE = ONE_MB;
 
-interface Props<N, T> extends Omit<FileInputProps<N>, 'value' | 'onChange' | 'accept'> {
+export interface Props<N, T> extends Omit<FileInputProps<N>, 'value' | 'onChange' | 'accept'> {
     maxFileSize?: number;
     value: T | undefined | null;
     onChange: (newValue: T | undefined, name: N) => void;

manager-dashboard/app/utils/common.tsx

@@ -66,8 +66,9 @@ export const PROJECT_TYPE_FOOTPRINT = 2;
 export const PROJECT_TYPE_CHANGE_DETECTION = 3;
 export const PROJECT_TYPE_COMPLETENESS = 4;
 export const PROJECT_TYPE_STREET = 7;
+export const PROJECT_TYPE_VALIDATE_IMAGE = 10;
 
-export type ProjectType = 1 | 2 | 3 | 4 | 7;
+export type ProjectType = 1 | 2 | 3 | 4 | 7 | 10;
 
 export const projectTypeLabelMap: {
     [key in ProjectType]: string
@@ -77,6 +78,7 @@ export const projectTypeLabelMap: {
     [PROJECT_TYPE_CHANGE_DETECTION]: 'Compare',
     [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
     [PROJECT_TYPE_STREET]: 'Street',
+    [PROJECT_TYPE_VALIDATE_IMAGE]: 'Validate Image',
 };
 
 export type IconKey = 'add-outline'

manager-dashboard/app/views/NewProject/ImageInput/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {
+    SetValueArg,
+    Error,
+    useFormObject,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+import TextInput from '#components/TextInput';
+
+import {
+    ImageType,
+} from '../utils';
+
+import styles from './styles.css';
+
+const defaultImageValue: ImageType = {
+    sourceIdentifier: '<unique-identifier>',
+};
+
+interface Props {
+    value: ImageType;
+    onChange: (value: SetValueArg<ImageType>, index: number) => void | undefined;
+    index: number;
+    error: Error<ImageType> | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+export default function ImageInput(props: Props) {
+    const {
+        value,
+        onChange,
+        index,
+        error: riskyError,
+        disabled,
+        readOnly,
+    } = props;
+
+    const onImageChange = useFormObject(index, onChange, defaultImageValue);
+
+    const error = getErrorObject(riskyError);
+
+    return (
+        <div className={styles.imageInput}>
+            <TextInput
+                label="Identifier"
+                value={value?.sourceIdentifier}
+                name={'sourceIdentifier' as const}
+                // onChange={onImageChange}
+                error={error?.sourceIdentifier}
+                disabled={disabled}
+                readOnly
+            />
+            <TextInput
+                label="File name"
+                value={value.fileName}
+                name={'fileName' as const}
+                onChange={onImageChange}
+                error={error?.fileName}
+                disabled={disabled || readOnly}
+            />
+            <TextInput
+                label="URL"
+                value={value?.url}
+                name={'url' as const}
+                onChange={onImageChange}
+                error={error?.url}
+                disabled={disabled || readOnly}
+            />
+        </div>
+    );
+}

manager-dashboard/app/views/NewProject/ImageInput/styles.css

@@ -0,0 +1,5 @@
+.image-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+}